DIV tags not aligning properly - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

DIV tags not aligning properly

Left <div> tags pushing the right down

lateatnight

12:10 am on Mar 20, 2011 (gmt 0)

10+ Year Member

I'm trying to create a site purely with CSS for the first time, and I was doing quite well until I hit an annoying roadblock.

It's a two column layout, and what's happening is that the DIVs on the left are pushing down the DIVs on the right. I need them all to snap to the top of each other, side by side.

Here's my CSS:

And here's my HTML:

Specifically, the <header-a> DIV on the left has a 250px square image that is pushing the <main> DIV down on the right, resulting in an ugly gap. Also, once the <navigation> DIV ends on the left, there is another blank spot on the left, since the the <main> DIV on the right has more content.

There must be a reasonably simple fix for this - I hope! Any ideas?

I know we're not supposed to include links, but here's what I'm dealing with: http://example.com

[edited by: alt131 at 3:02 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy [/edit]

SuzyUK

11:35 am on Mar 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi lateatnight

it's Sunday freebie time ;)

You were doing well, the site is lovely. as for the annoying road block, it's a fairly common one that people reach, floats and clearance and full length column effect nightmares are in your near future.

first off, when going to floated layouts it can be quite hard to get over the sliced images method of building a site, so you need to approach it a little differently, because your first img (250 x 250) is floated left then the second element involved (sidenav) also floats left but clears, the next floating element, your 600 x 150 image will also clear, no float can be higher than a predecessor.. so the second image is not going any higher than the nav list

so if I may I'll give you an alternative way with notes to explain the various bits, that will solve your jigsaw problem, reorder the source so the content is first (just a nice aside, no particular reason, except screen readers and bots will get the content first) - this way will also enable you to use a full length repeating effect on the wrapper background so the next hurdle you would reach (filling the background in between the sidenav and the footer) can also be jumped.

You will need to make yourself one more image, 850px wide and 2-10px high, you can chop a cutting from the top of your footer background image - you need the full 850px width with the two side shadows, doing this, another aside is that you will then not need the right column background!

summary, two columns ..
the first 600px wide floated right, second 250px not floated.. second will sit to the left of the main one.. the footer clears both the above and holds the bottom effect. stretching the wrapper background behind both columns regardless of which is longest. All three of these are inside your wrapper div.. the background I just asked you to make repeats down the wrapper div, so it doesn't matter which side is longest the effect runs full length.

Your two header images will hide the top of the wrapper background giving your top effect, and the footer background does the same for the bottom.. nice rounded corners and shadows all intact

instead of being side by side, the two "header" images sit at the top of their respective columns and could still be linked to the home page, if you think it's imperative that come together in the source you could position the photo image.. ask later if you want to do this.. I think they're Ok like this and each gives a nice start to your divisions

I've added lots into the notes, especially a header replacement for the "photos" heading this is to help show how to use non-empty elements to get the effects you want.. i.e. try to use existing ones, or ones that are likely to have a use in the future (e.g. the footer div) I changed the sidenav to a list, as that is the usual way to mark up a menu, I also added the full width hover effect to the links to show you the benefits of using lists

I left in an extra navigation wrapper around the lists, this may seem unnecessary, but it is actually controlling the margins/width of the available content area in the sidenav.. that way if you ever want to add anything else, aside from a navigation list into the sidebar just put it in it's own classed div and it's good to go at 100%;

removed a bit of unnecessary padding: 0; margin: 0; rules, divs do not have padding or margins by default so they're not required, unlike h2, lists and p's so you'll see where I've put them or left them in it's because they are doing something, in which case I've zero'd them then readded where necessary. the body element especially i.e I have duplicated rules, but I often do it like this anyway as a reminder that zeros are actually resetting

code is long, because of notes so I'll put in next post

remember it'll look like it's got sticky out bits until you put that new image on the background of the wrapper div

have a nice weekend
Suzy

SuzyUK

11:41 am on Mar 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example | Welcome</title>
<link href="example.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* ---General Defaults---*/

body {
margin: 0; padding: 0; /* reset defaults so working from clean base */
background-color: #333333;
margin-top: 30px;
padding-bottom: 10px; /* to give some bottom spacing - adjust to suit or remove */
/* put generic font declarations on main divs, they will inherit and will avoid styling all internal elements, only overrule where required */
font-family: "Lucida Sans Unicode", "Lucida Console", "Lucida Grande", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}

/* declare the master link colors for the document here then just override when you need to */
a:link, a:visited {color: #999999; text-decoration: none;}
a:hover, a:visited:hover {color: #000000; text-decoration: none;}

/* --- LAYOUT ---*/
#wrapper {
width:850px;
margin:0 auto; /* to center */
overflow: hidden; /* to contain floats */
background: #dce0c5; /* replace this with full width repeating background green with dark bits at both sides */
}
#main {
width:600px;
float:right; /* so content can go first in the source */
/*background:url(http://www.example.com/newsite/images/layout/right_column_bg.jpg) repeat; - this not required if you do the wrapper background image instead */
}

#sidebar {
width: 250px; /* no need to float */
overflow: hidden; /* this will make it not wrap content under it not required for this layout but is good habit for 'columns' */
}

/* --- INTERNAL FORMTTING --- */

.headerimg {
display: block; /* both images can use the same class, block just makes sure they are cleared and do not have normal inline "whitespace" gaps */
}

/* using an H2 instead of an empty div for the heading image replacement */
#main h2 {
width: 552px;
height: 43px;
margin: 0;
text-indent: -600px; /* text-replacement method if required, this way the h2 holding the background image still reads something to text browsers/SE's */

/* properties that would be common to all images used in these h2 headings, if they're different move them to the rules below */
background-color: #8f96b2;
background-repeat: no-repeat;
background-position: 0 0;
}

/* put a class on the #main div too, the use different class per section to serve different image,
this will mean you can just use a different image without redeclaring the above h2 rules everytime */
.photos h2 {
background-image: url(http://www.example.com/newsite/images/layout/header_photos.gif);
}

#content {
font-size: 14px; /* generic content rules first */
line-height: 20px;
color: #000000;

background-color:#FFFFFF;
width:550px;
border: 1px solid #8F96B2;

padding: 20px 0; /* to space the content from the top image and bottom of div */

-moz-border-radius-bottomright: 8px;
border-bottom-right-radius:8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius:8px;
}

/* specific content rules */
#content p {
padding: 0 20px 0 20px; /* doesn't need so much right padding now but adjust to suit T-R-B-L */
}

/* --- SIDEBAR FORMATTING --- */

#sidenav { /* width available 250px; adjust margin and width in here to suit */
margin-left: 30px; /* to clear side "borders" of the background */
width: 200px; /* 20px less than required to ensure a gap between this and the main content ic case text links get longer */
background: #fcf; /* temporary to "see" the nav content area */

/* again put generic font-settings on the parent div so it get's inherited by all elements inside it */
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 28px;
color: #60688A;
}

#sidebar ul { /* this gets spaced by fitting inside the parent #sidenav div */
/* browsers use different ways to indent a list, so it's best to zero both padding and margins then just use one if required */
margin: 0;
padding: 0;
list-style: none; /* remove default bullets */
}

#sidenav a {
display: block; /* will make links fill the <li> elements and stretch the full width of sidebar, hover will then be active even when not on text */
}

/* override the master links with desired colors */
#sidenav a:link, #sidenav a:visited {color: #60688A; text-decoration: none;}
#sidenav a:hover {color: #000000; text-decoration: none; font-weight:bold;}
#sidenav a:visited:hover {color: #000000; text-decoration: none;}

/* --- FOOTER --- */

#footer {
clear: both;
width: 850px;
/*height:40px - don't put height, instead positon the background image at the bottom and use padding to get minimum required for effect
incase the div needs to get bigger.. uncomment text in footer to show bigger effect */
padding-bottom: 25px; /* to show minimum amount of the image and also ensure any text actually in the footer doesn't go over dark bit of footer image */
background: url(http://www.example.com/newsite/images/layout/footer_bg.jpg) no-repeat bottom; /* align background image to the bottomo of this div */
text-align: center;
color: #60688a;
font-size: 13px;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="main" class="photos">
<img class="headerimg" src="http://www.example.com/newsite/images/layout/right_header.jpg" alt="Dawn Chubai" width="600" height="150" />

<h2>Photos</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Saviter ad lucum, perdua ad astra. Donec et orci eu diam elementum iaculis. Fusce sit amet ligula eget urna suscipit consectetuer. Donec neque. Pellentesque erat sapien, euismod et, venenatis non, fermentum non, sapien. Quisque ac ante vel massa placerat tempus. Duis volutpat. Aenean ultrices sodales turpis. Suspendisse potenti, mare nostrum. Fusce vitae sem in pede euismod accumsan. Integer ultricies volutpat justo.</p>
<p>Morbi commodo quam non eros. Donec et orci eu diam elementum iaculis. Cras dictum rutrum nulla. Duis iaculis, nibh ultrices nonummy gravida, tortor purus interdum tellus, eu vehicula felis neque vel ipsum. Pellentesque aliquam congue massa. Donec est mauris, consectetuer non, porttitor ut, ornare sed, enim. Ut consequat. Morbi libero eros, hendrerit at, elementum in, tincidunt sit amet, ligula.</p></div>
</div>

<div id="sidebar">
<img class="headerimg" src="http://www.example.com/newsite/images/layout/left_header.jpg" alt="Dawn Chubai" width="250" height="250" />

<div id="sidenav">

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Acting</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>
</div>

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

</div>
</body>
</html>

lateatnight

6:01 pm on Mar 20, 2011 (gmt 0)

10+ Year Member

AMAZING! Thank you so much, Suzy. Usually when I have a problem like this, I just look for the answer to be honest - it doesn't matter if I really understand the solution, as long as it works! However, your expert advice made perfect sense and I understand the whole process. I did a few things differently, but it looks OK in both browsers, so I'm happy and will proceed with the rest of the site. Thanks again!
http://example.com

[edited by: alt131 at 3:03 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy [/edit]

SuzyUK

1:54 am on Mar 24, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You're Welcome! like I said it was nicely coded already so it made it easy, glad if it helped..

Suzy