3 divs and positioning them

sharpcode · February 3, 2013

<body>
  <div id="left"> </div>

  <div id="right"> </div>

  <div id="wrapper"> 
   <div id="header"></div>
   <div id="menu"></div>
   <div id="content"></div>
  </div>

  <div id="footer"> </div>
</body>

That is my structure at the moment. The footers width is 100%, the wrapper is 940px and centered int he middle of the screen.

now i added the left and right div but they are pushing down the wrapper and making it look longer for some funny reason. Any help would be great

sharpcode · February 3, 2013

thats wha ti am aiming for. 3 divs then a footer (4) with 100% width. So 1 is left, 3 is centered so auto margin or whatever with 940px width and 3 is right.

Edited February 3, 2013 by sharpcode

Frank P · February 3, 2013

Sounds like a homework assignment to me. And if you actually are a coder, I'm still going to refer you to my tutorial on CSS positioning, linked from my signature page. Because positioning is such essential, basic stuff, you really cannot do without a thorough knowledge of it.

I will give you one tip, though: float the divs 1 and 3, left and right, and nr. 2 will automatically position itself in between them. If there is enough space, of course.

Edited February 3, 2013 by Frank P

sharpcode · February 3, 2013

the main problem is its making the header inside the wrapper longer and in turn is pushing the content down further. They float right i always had that from the start thats CSS 101. But just cant figure this little bug out.

this is the header css... nothing that would make it resize so really confused if anyone has any idea or maybe a better way let me know otherwise ill post back when i find what this annoying little bug is -.-


   width: 940px;
   padding: 40px 10px 20px;
   background: url(../images/bgheader.png) bottom center no-repeat;

Love2c0de · February 3, 2013

Can you post a live link or your relevant HTML and CSS?

We can help you much better if we have something to work with or all the relevant style declarations.

Kind regards,

L2c.

Edited February 3, 2013 by Love2c0de

Love2c0de · February 3, 2013

Hi dude,

Consider this code, this is something I wrote not so long ago for my own site:

<?php

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style type="text/css">

#content_wrapper
{
width: 1000px;
margin: 10px auto;
}

#left_container
{
width: 200px;
height: 400px;
float: left;
text-align: center;
font-size: 12px;
background: #252527 url('../images/background_img.jpg');
border: 1px solid #fff;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;

}

#right_container
{
width: 200px;
background: #252527 url('../images/background_img.jpg');
height: 400px;
float: right;
text-align: center;
border: 1px solid #fff;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}

#container
{
background: #252527 url('../images/background_img.jpg');
width: 560px;
min-width: 560px;
margin: 10px auto;
height: 400px;
border: 1px solid #fff;
padding: 0px 10px 0px 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}

</style>
<script>

</script>

</head>

<body>

<div id="content_wrapper">

<div id="left_container">
<?php if(isset($left_sidebar)){print($left_sidebar);} ?>
</div>

<div id="right_container">
<?php if(isset($right_sidebar)){print($right_sidebar);} ?>
</div>

<div id="container">

</div>
</div>


</body>
</html>

I put everything into a #content_wrapper div. The reason for that is because my left and right 'container' divs are floated left and right, so when you zoom out of the browser the 2 sidebars would have stayed floating - making the layout messed up. Change #content_wrapper div to whatever maximum width needs to be of the 3 columns, taking into account margins and paddings of those divs. Change the sizes of your left and right divs and make the wrapper div 940px as you need it to be.

Add your footer OUTSIDE of the 'content_wrapper' div to make sure it spans 100% of whatever resolution the user is browsing in.

Put it in a test file and see what it looks like in comparison to what you want to achieve.

Hope this helps. Just gives you a bit of an idea of how to do it.

Kind regards,

L2c.

Edited February 3, 2013 by Love2c0de

sharpcode · February 4, 2013

Problem was the site title inside the header for some reason not sure how to explain it. But updated it and changed the margin and it worked... i will try imitate the problem offline later for fun and see what the problem was exactly. Thanks for your help though L2c!

Love2c0de · February 4, 2013

No problem, glad you solved you issue!

Regards,

L2c.

Sign In

3 divs and positioning them

Recommended Posts

sharpcode

Link to comment

Share on other sites

sharpcode

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

sharpcode

Link to comment

Share on other sites

Love2c0de

Link to comment

Share on other sites

Love2c0de

Link to comment

Share on other sites

sharpcode

Link to comment

Share on other sites

Love2c0de

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information