3 replies [Last post]
Offline
Regular
canada
Last seen: 11 years 37 weeks ago
canada
Timezone: GMT-6
Joined: 2011-03-05
Posts: 12
Points: 20

I am just having some trouble on positioning my div tags properly using css. like for example if i want to divide my page in two, lets say the content on the left side and a vertical navbar/search input/whatever on the right side, i will have to use the float property right? so that is #content {float:left;} #sidecontent {float:right;} #footer {clear:both}... something like that. But what if I want to divide the page in three? content in middle, nav bar on right and something else on the left side... how would i go on displaying that? i hope that made sense.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Keep sub dividing those

Keep sub dividing those elements, add another floated element in one of the parent ones, There are many examples of layouts around the net to examine and study, the principle of sub dividing in this manner was first iirc written about or demonstrated by PIE http://www.positioniseverything.net/ but there are many approaches you could take. This is a three column layout so you should google that to find layout guides and have a good study.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

plalmeida
plalmeida's picture
Offline
Regular
Portugal
Last seen: 11 years 36 weeks ago
Portugal
Joined: 2011-03-06
Posts: 20
Points: 24

First answer

You could do something like:

<style type="text/css">
#wrapper {
	width: 1000px;
}
#left_sidebar
{
    float:left;
    width: 150px;
}
#right_sidebar
{
    float:right;
    width: 150px;
}
#content 
{
    margin-right: 170px;
    margin-left: 170px;
}
</style>
</head>
 
<body>
<div id="wrapper">
    <div id="left_sidebar">A</div>
    <div id="right_sidebar">B</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus egestas aliquet. Nullam dictum, risus quis eleifend dignissim, elit libero euismod tortor, in commodo sem felis in nibh. Cras sagittis ipsum vitae mi elementum sed vehicula augue ornare. Nunc tincidunt libero non dolor sollicitudin vehicula. Morbi eget est in nulla gravida lacinia in ac dolor. Praesent id sem et felis sodales tristique ut sed nunc. Vivamus id lectus mauris. Aliquam at urna orci. Ut gravida consectetur pretium. Fusce odio metus, consectetur ac gravida quis, pellentesque vel turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ligula erat, pulvinar ut gravida a, eleifend in neque. Morbi tristique justo eros. Aliquam non metus eget metus dictum elementum. Suspendisse imperdiet urna ut libero condimentum interdum. In ut semper erat. Nam sed nisi non velit aliquet pulvinar. Sed commodo vehicula iaculis. Proin ac ante nec neque imperdiet pulvinar. Praesent tempus odio eget risus vestibulum auctor. </div>
</div>
</body>
</html>

We have to use margins on the #content div so that the content doesn't wrap up around the floated elements.

plalmeida
plalmeida's picture
Offline
Regular
Portugal
Last seen: 11 years 36 weeks ago
Portugal
Joined: 2011-03-06
Posts: 20
Points: 24

Second answer

If you want more complicated layouts, you can use a variation of the following (fixed-width) layout, which has 4 columns:

<style type="text/css">
#wrapper {
	width: 980px;
}
#left_sidebar
{
    float:left;
    width: 150px;
}
#right_sidebar
{
    float:right;
    width: 150px;
}
#content 
{
    margin-right: 170px;
    margin-left: 170px;
}
#first 
{
    float:left;
    width: 810px;
}
#new_right_sidebar
{
    float:right;
    width: 150px;
}
</style>
</head>
 
<body>
<div id="wrapper">
    <div id="first">
        <div id="left_sidebar">A</div>
        <div id="right_sidebar">B</div>
        <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus egestas aliquet. Nullam dictum, risus quis eleifend dignissim, elit libero euismod tortor, in commodo sem felis in nibh. Cras sagittis ipsum vitae mi elementum sed vehicula augue ornare. Nunc tincidunt libero non dolor sollicitudin vehicula. Morbi eget est in nulla gravida lacinia in ac dolor. Praesent id sem et felis sodales tristique ut sed nunc. Vivamus id lectus mauris. Aliquam at urna orci. Ut gravida consectetur pretium. Fusce odio metus, consectetur ac gravida quis, pellentesque vel turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ligula erat, pulvinar ut gravida a, eleifend in neque. Morbi tristique justo eros. Aliquam non metus eget metus dictum elementum. Suspendisse imperdiet urna ut libero condimentum interdum. In ut semper erat. Nam sed nisi non velit aliquet pulvinar. Sed commodo vehicula iaculis. Proin ac ante nec neque imperdiet pulvinar. Praesent tempus odio eget risus vestibulum auctor.</div>
    </div>
    <div id="new_right_sidebar">C</div>
</div>
</body>

I have wrap a new div (#first) around the previous 3 div elements, and I floated left that div. A new div (#new_right_sidebar) is inserted and floated right.
I believe this is what Hugo meant when he said:
"Keep sub dividing those elements, add another floated element in one of the parent ones"