CODEWITHSUNDEEP
csslayouthtmlmultiple-columns
RhymeGuy
RhymeGuy

Reputation: 2122

two column layout, content first

HTML:

<div id="main">
    <div id="sidebar"></div>    
    <div id="content"></div>        
</div>

CSS:

#content {
    background: blue;
    height: 900px;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red
}

JSFIDDLE: http://jsfiddle.net/aFrPc/

While this works, I would like to have #content listed first (instead of #sidebar). Div #content must fill all remaining space.

Image of final wanted result:

Upvotes: 0

Views: 423

Answers (2)

1andsock
1andsock

Reputation: 1567

Try this. #Content is listed first, and takes up 100% of the remaining space after a 200px sidebar:

body{
  overflow-x:hidden;
}
#content {
  background: blue;
  height: 900px;
  position:absolute;
  width:100%;
  left:200px;
}

#sidebar {
  float: left;
  width: 200px;
  height: 900px;
  background: red
}

Jsfiddle: http://jsfiddle.net/VkQ6U/

Upvotes: 2

tmcc
tmcc

Reputation: 1020

UPDATED If he wants the content text before the sidenav text. Fiddle

    <div id="main">
    <div id="content">
        <div style="padding-left:200px">
        Context
        </div>
    </div>        
    <div id="sidebar">sidebar</div>    
</div><!--#main-->

#content {
    background: blue;
    height: 900px;
    width:100%;
    margin-left:-200px;
    float:right;
    color:#fff;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red;
}

Upvotes: 2

Related Questions