Variable content width fixed sidebar width layout

Question

I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.

It is currently a fixed width layout.

Main styles that I've been playing with are:

#wrapper {
width:960px;
margin:0 auto;
}

#content {
padding:25px 0;
}

section {
float:left;
width:660px;
margin-right:20px;
}

aside {
float:left;
width:280px;
}

I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.

zer0ruth · Accepted Answer · 2013-03-21 13:19:38Z

2

use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.

now position your aside to the top left of your #wrapper div

aside {
    width: 280px;
    position: absolute;
    right: 0;
    top: 0;
}

and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).

section {
    padding-right: 280px;
}

I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/

BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.

answered Mar 21, 2013 at 13:19

zer0ruth

893 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ajay Over a year ago

This seems to give the best result. I've not included the top: 0 option, but this seems to move everything to the top of the window. Am I missing something?

zer0ruth Over a year ago

Hey @AjayD'Souza As long as the only two elements inside your relatively positioned wrapper are <section> and <aside> you should be fine. I forked the example here: jsfiddle.net/5fPef/1

sdw · Accepted Answer · 2014-11-19 19:01:49Z

2

Morphius solution is the best so far - for an example, see http://codepen.io/anon/pen/wBBdgg

.blbx { 
background:blue;
 width: calc(100% - 100px);
  height:50px;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  
  
   
}

.rdbx { 
background:red;
 display:inline-block;
   height:50px;
   width: 100px;
  vertical-align:top;
 
}

.surround {
	
  width: 100%;
   height:50px;
  
}

.myimg { max-width:100%;
  max-height:100%;
}

<div class='surround'>
  <div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
  </div><div class="rdbx"></div></div>

answered Nov 19, 2014 at 19:01

sdw

67110 silver badges11 bronze badges

Comments

John Slegers · Accepted Answer · 2016-02-12 12:11:17Z

1

Change your styles to this

section {
    float:left;
    width:100%;
    margin-right: -280px;
}

aside {
    float:left;
    width:280px;
}

Live example

edited Feb 12, 2016 at 12:11

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

answered Mar 21, 2013 at 11:52

Morpheus

9,13613 gold badges54 silver badges80 bronze badges

3 Comments

Ajay Over a year ago

Morpheus, setting section width to 100% causes the sidebar to go below content and content fills the width of everything

Morpheus Over a year ago

Use css calc then. section { width: calc(100% - 280px). It will not work in IE8 and lower.

Ajay Over a year ago

Thanks Morpheus, this works. I've tested this on Firefox and program some compatibility for older browsers and Opera as well.

user3559298 · Accepted Answer · 2016-03-31 08:58:40Z

0

Maybe this would do:

section {
    float:left;
    width:100%;
    padding-right:250px;
    height:100px;
}

aside {
    float: left;
    width: 250px;
    min-height: 100%;
}

answered Mar 31, 2016 at 8:58

user3559298

772 silver badges7 bronze badges

Comments

Nandhakumar · Accepted Answer · 2013-03-21 12:13:35Z

-1

section {
    float:left;
    width:660px;
    margin-right:20px;
    height:100px;
}

aside {
    height:100px;
    margin-left: 670px;
}

live demo

answered Mar 21, 2013 at 12:13

Nandhakumar

3762 silver badges10 bronze badges

1 Comment

Ajay Over a year ago

Nandhakumar, not sure if this fixes my width issue for the section when I resize the window?

Collectives™ on Stack Overflow

Variable content width fixed sidebar width layout

5 Answers 5

2 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related