Can't get divs to align correctly [Archive]

Click to See Complete Forum and Search --> : Can't get divs to align correctly

Stevo22

01-20-2008, 09:12 AM

Hi Guys,

I've just started to code my first site (http://www.sharpstickenterprises.com/test.php) using css and cannot work out why my right content div is dropping down and lining up with the base of the header (centreband) div. I've checked it in IE6 and IE7 and FireFox and it looks the same.

There are some validation issues with the html but I can't see that causing the problem - not sure how to fix the validation errors anyway. Not sure if my css is entirely correct although it validates with 1 warning.

As this is my first 'hand coded' effort please feel free to advise on any other things that are not quite correct.

<!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>KUNST - The Band</title>

<link rel="stylesheet" type="text/css"
href="../css_stylesheets/kunst_basic.css" />

</head>
<body>

<div id="sitewrap">

<div id="leftstripe"></div>

<div id="leftcontent">
<span class="mainpic"><img src="/images/kunst_web_logo.jpg" alt="KUNST Picture" height="181" width="144" border="0" /></span>
<span id="kunstaretext">
<h2>KUNST are:</h2>
<div class="dotline"></div>
<p>Munkii
<span class="small">(Matt Spencer)</span>

<span class="italic">Vocals and Lyrics</span></p>
<div class="dotline"></div>
<p>Sideshow
<span class="small">(Tony Matticoli)</span>
<span class="italic">Lead Guitar</span></p>
<div class="dotline"></div>
<p>Wah Wah
<span class="small">(Chris Godsell)</span>

<span class="italic">Guitar (wah wah)</span></p>
<div class="dotline"></div>
<p>Stevo
<span class="small">(Steve Kelepouris)</span>
<span class="italic">Bass Guitar</span></p>
<div class="dotline"></div>
<p>Maddog
<span class="small">(Mark Kelepouris)</span>
<span class="italic">Drums</span></p>
<div class="dotline"></div>

</span>
</div>
<div id="mainheader">
<div id="menuwrap">

<ul class="menu">
<li><a href="../index.php">Home</a></li>
<li><a href="/pages/ourmusic">Our Music</a></li>

<li><a href="/pages/jammplan">Jamm Plan</a></li>
<li><a href="/pages/pics">Pictures</a></li>
<li><a href="/pages/downloads">Misc</a></li>
<li><a href="/pages/feedback">Feedback</a></li>
</ul>
</div>
<div id="centreband"></div>

<span id="quotestart"><h3>“</h3></span>
<span id="quoteend"><h3>”</h3></span>
<span id="mainquotetext">
<h1>We don't have any particular racial, political or religious
<br />affiliations - We just play the music as we feel it!</h1>
</span>
</div>

<div id="pagecontent">
This is where the content will go.

</div>

<div id="rightcontent">
</div>

<div id="rightstripe"></div>

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

* {
border : 0;
padding : 0;
margin : 0;
}
html, body {
background-color : #2b2b2b;
margin : 0;
padding : 0;
height : 100%;
border : 0;
}
p {
margin : 0;
}
#sitewrap {
margin : 0 auto;
width : 910px;
height : 100%;
}
#leftstripe {
background-image : url("../images/left_stripe.jpg");
background-repeat : repeat;
display : inline;
position : relative;
width : 20px;
height : 100%;
float : left;
}
#leftcontent {
background-color : #000058;
display : inline;
position : relative;
width : 144px;
height : 100%;
float : left;
}
#mainheader {
background-color : orange;
display : inline;
position : relative;
width : 582px;
height : 181px;
float : left;
}
#pagecontent {
background-color : purple;
display : inline;
position : relative;
width : 582px;
height : 100%;
float : left;
overflow : hidden;
}
#centreband {
background-color : #e29606;
display : inline;
position : absolute;
top : 90px;
width : 582px;
height : 90px;
float : left;
border-top : 1px solid #dc9000;
border-bottom : 1px solid #dc9000;
}
#rightcontent {
background-color : #000058;
display : inline;
position : relative;
width : 144px;
height : 100%;
float : left;
}
#rightstripe {
background-image : url("../images/right_stripe.jpg");
background-repeat : repeat;
display : inline;
width : 20px;
height : 100%;
float : left;
}
.mainpic {
background-image : none;
display : block;
position : relative;
float : left;
clear : both;
border-bottom : 1px solid black;
}
#mainquotetext {
display : block;
position : absolute;
top : 111px;
left : 50px;
width : 600px;
float : left;
}
#kunstaretext {
position : relative;
top : 10px;
left : 10px;
float : left;
}
p {
color : #f0e68c;
font-size : 12px;
font-family : Verdana;
line-height : 14px;
background-color : transparent;
}
h1 {
color : #484848;
font-size : 18px;
font-family : "Trebuchet MS";
font-style : italic;
font-weight : bold;
line-height : 24px;
background-color : transparent;
text-align : left;
}
h2 {
color : white;
font-size : 12px;
font-family : Verdana;
font-style : normal;
font-weight : bold;
line-height : 14px;
background-color : transparent;
text-align : left;
}
h3 {
color : orange;
font-size : 90px;
font-family : "Times New Roman", Times;
font-style : italic;
font-weight : bold;
text-align : left;
}
#quotestart {
position : absolute;
top : 80px;
left : 3px;
float : left;
}
#quoteend {
position : absolute;
top : 113px;
left : 463px;
float : right;
}
.italic {
color : white;
font-size : 10px;
font-style : italic;
line-height : 13px;
display : block;
}
.small {
color : white;
font-size : 10px;
font-style : normal;
line-height : 13px;
display : block;
}
.dotline {
display : block;
margin-top : 6px;
margin-bottom : 4px;
position : relative;
width : 124px;
height : 1px;
border-top : 1px dotted orange;
}
#menuwrap {
position : relative;
width : 582px;
height : 88px;
}
ul {
list-style-type : none;
width : 100%;
}
li {
float : left;
}
.menu a {
color : white;
font : bold 10px Verdana, Arial;
text-decoration : none;
background : black;
text-align : center;
display : block;
padding-top : 2px;
position : relative;
top : 29px;
left : 15px;
width : 82px;
height : 16px;
float : left;
border-style : solid;
border-width : 1px 5px;
border-color : orange;
}
.menu a:hover {
color : white;
background : #b2001a;
border-style : solid;
border-width : 1px 5px;
border-color : white;
}
#feedback_form {
position : absolute;
top : 200px;
left : 160px;
float : left;
}

Help would be appreciated.
ta.

smyhre

01-20-2008, 03:42 PM

I would actually use like a 1-2px high image that repeats down as a background image behind your entire site you can put divisions with other background colors on top of it. Also in doing so it would automatically fill down as more content is added and you wouldnt have to worry about the two sides lining up. For example take your two images you got right now for the two sides and make them into one 910px wide by 2px tall image and have it fill down as a background image in the sitewrap div.

I would really try to get it to validate though because that actually makes browsers view your site in quarks mode if its not valid code which really will mess up the site.

smyhre

01-20-2008, 03:51 PM

Also since it is a fresh site and not transitioning from html to xhtml I would use a strict xhtml doctype instead of a transitional doctype. Of course in doing so quite a few other things will not be valid code but its better to learn right then get used to the wrong and have to relearn. In the image tags using styles like height and width inside the html makes changes a little more complicated as well, I would have those attributes applied by way of css in stead of by html.

html: <img src="image.jpg" alt="picture of something" title="image of something" class="something" />

css: .something {height: 100px; width: 200px; float: left;}

ray326

01-20-2008, 10:20 PM

You probably ought to consider using a faux column layout (http://alistapart.com/articles/fauxcolumns).

Stevo22

01-21-2008, 07:12 AM

Thanks for the suggestions, I've decided to go with HTML 4.01 Strict Doctype and managed to fix all the validation errors - whoopee!
They were primarily caused by the nesting of block elements within inline elements.

Nevertheless, it does nothing to fix my original problem, but at least I know the page is valid and that's a good starting point. From this point on I'm going to make sure the page validates first before I post it! :o

I could use an image behind as suggested by smyhre, but the righthand div is going to have content, and I would have thought that I'd end up with the same problem ie. the content will not start up the top where it should be.

One point is, if I remove the main pagecontent div, (which is colored purple for id purposes) the right column slides up and behaves properly.

I'd rather not use the faux column method - it seems a bit of a 'hack'.
I don't yet fully understand the concept of floating and/or clearing - I've read it, but it still hasn't sunk in yet - maybe this is where the problem lies.

If anyone has any other suggestions, I would be happy to hear them.

smyhre

01-24-2008, 08:26 AM

It shouldn't matter wether you have content in that right column or not; even if the content goes below at least the bg-image would look right. The content of the div above could be dealt with separately and might not even have to have a width making it fit the space.

I don't know if this will help any at this point but I use a bg-images filled down in a lot of my pages I have made. Here's a couple examples of how I used them:
http://www.andrewsaias.com
http://www.andrews.edu/~myhre

If they help then good if not then well I tried.;)

Go into the html and css of the pages if you like and see what I did, they don't have anything in the right area really, but even if there was stuff there it wouldn't be a problem unless it overflowed the boundary box with either width or margins. Hope it helps a bit

WebJoel

01-24-2008, 01:12 PM

* {
border : 0;
padding : 0;
margin : 0;
}
html, body {
background-color : #2b2b2b;
margin : 0;
padding : 0;
height : 100%;
border : 0;
}
p {
margin : 0;
}
#sitewrap {
margin : 0 auto;
width : 910px;
height : 100%;
.... You are aware that once you have stated the universal selector for "margin", "padding" and "border" to all be "zero", the restating of the others is redundant and bloat?
That is the purpose of the "universal selector", but if you are going to re-state "margin:0", "padding:0" and "border:0;", you might as well just not even bother to use the " * {margin:0; padding:0; border:0;} " :)

Stevo22

01-24-2008, 10:57 PM

Thanks for the info.

I've sorted out my original prob with the right hand div not not aligning to the top of the page. Annoyingly I lost the link and bit of paper I had it printed on and I can't remember exactly what did it. Overflow hidden on the surrounding div seems to ring a bell, but i'm not sure. I do know that the #pagecontent div has to be absolutely positioned otherwise it falls to bits.

I read somewhere on these forums that in most cases you shouldn't have to use absolute. So maybe what I have done will cause probs later.

Oh well, It's a big learning curve at the moment, so as long as I'm learning and moving forward it's ok.

Regarding your suggestions WebJoel, I see what you are getting at and I'll remove the extra code. What about this one though?

#sitewrap {
margin : 0 auto;
width : 910px;
height : 100%;

If I remove that line the content won't centre?

smyhre

01-25-2008, 08:26 AM

You should keep the {margin: 0 auto;} for the centering of the page.

WebJoel

01-25-2008, 06:13 PM

Keep it. "auto" is not "zero" and if margin:0 auto; is combined with a width:foo; it effectively centers the element. Change "auto" to "zero" and you get a totally different effect... (and as such, element would now be left-hand justified, not 'centered'). :)

Stevo22

01-25-2008, 08:54 PM

Yeah thanks, that's what I thought was the case.