Div trouble [Archive] - CodingForums.com

View Full Version : Div trouble

angelbabe.org

04-15-2006, 11:39 AM

Hey im sorta new at this whole css thing and i need help with the coding as the divs dont line up properly next to each other.

Here is the HTML:
<!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>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="container">
<div id="write">Welcome to Alex's band blah blah blah blah. </div>
<div id="left"><br />
<div id="leftin">
<div id="strip">
<p><br />
Home</p>
<p>About Us</p>
<p>Gigs</p>
<p>Contact</p>
<p>Forums</p>
</div>
</div>
<p> </p>
</div>
</div>
</body>
</html>

And this is the CSS:

/* CSS Document */

body {
background:#FFFFFF;
font-family:'Lucida Grande',Verdana, Arial, sans-serif;
font-size:11px;
color:#ffffff;
}

#header{
width:600px;
height:200px;
margin-left:auto;
margin-right:auto;
background-image:url(images/header.gif);
}

#container{
width:600px;
height:600px;
margin-left:auto;
margin-right:auto;
background-image:url(images/main1.gif);
}

#left{
width:200px;
height:600px;
background-image:url(images/left1.gif);
}

#leftin{
width:170px;
height:300px;
margin-left:auto;
margin-right:auto;
background-image:url(images/strip.gif);
}

#strip{
width:130px;
height:300px;
margin-left:auto;
margin-right:auto;
}

#write{
width:400px;
height:600px;
margin-right:inherit;
margin-left:auto;
}

Can you please help me because i dont know what to do.

Dan Williamson

04-15-2006, 11:53 AM

Can you provide a link or screenshot please so I can have a look.

angelbabe.org

04-15-2006, 12:17 PM

This link is to what it should look like : www.angel-designs.org/1.gif

And this one is what it looks like at the moment (its to screenshots coz i couldnt fit it all on one screenshot):www.angel-designs.org/2.gif

Dan Williamson

04-15-2006, 12:44 PM

After scanning your code pretty quickly you could try:

#left{
width:200px;
height:600px;
float: left;
background-image:url(images/left1.gif);
}

And the change your HTML to this, i'm not sure it will work but perhaps =]

<!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>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="container">
<div id="write">Welcome to Alex's band blah blah blah blah. </div>
<div id="left">
<div id="leftin">
<div id="strip">
<p>Home</p>
<p>About Us</p>
<p>Gigs</p>
<p>Contact</p>
<p>Forums</p>
</div>
</div>
<p> </p>
</div>
</div>
</body>
</html>

I doubt this will work but give it a try otherwise it may be that your divs are the wrong size.

angelbabe.org

04-15-2006, 12:47 PM

no it didnt work, and my divs are the right size and that.

orcrist

04-15-2006, 01:04 PM

add float:left; on both #write and #left.
you need to clear after those floats to avoid positioning trouble, so in html add
<div id="clearer"> </div>
before exiting #container or starting new horizontal level. css for that div will be:
#clearer{clear:both;line-height:0;font-size:0;}

angelbabe.org

04-15-2006, 01:10 PM

Thanks i got the floting thing but i had to change one to float:right; to make it be right. But i didnt understand that clearer thing or wat it is or what it is doing and also where abouts on the html code to put it.

Megan
www.angel-designs.org

orcrist

04-15-2006, 02:09 PM

when floated, element is extracted from natural flow of document. to simplify it, most common problem is that parent element (container) will colapse on 0 height, wont wrap around floated child. to avoid that, i usually insert non-floated element, and give it atribute clear: with value both;
that reastablishes mentioned natural order of things, and make parent expand its height.
where to add it depends on structure of your html, if you dont have anything that goes below those two floated elements, id place it after last floated (#left), but before end of #container, like this:
<body>
<div id="header"></div>
<div id="container">
<div id="write">Welcome to Alex's band blah blah blah blah. </div>
<div id="left"><br />
<div id="leftin">
<div id="strip">
<p><br />
Home</p>
<p>About Us</p>
<p>Gigs</p>
<p>Contact</p>
<p>Forums</p>
</div>
</div>
<p> </p>
</div> 
<div id="clearer"> </div>
</div> 
</body>

EDIT: lol, of corse, you wouldnt notice that, cos you have set fixed height on container, i didnt noticed till now.. :p sorry if that was too much input, but may come handy sometimes

angelbabe.org

04-15-2006, 03:15 PM

Thanks for your help,

And also i just amde an excellent wallpaper which im well chuffed about on my website.

www.angel-designs.org/wallpapers.html

orcrist

04-15-2006, 03:50 PM

you are wellcome, im glad if that helped you

nice site, and i love your art..
but your coding might use some work, lol. try validating your work, it will report you any mistakes and sugest how to avoid them..many will argue that page can work with numerous mistakes, but its a good practice and you can learn a lot, so imho its worthwhile in the long run:
http://validator.w3.org/

angelbabe.org

04-15-2006, 08:53 PM

Thanks for saying you like my art,

And ill try out making it validated lol but its proberly not going to go to well seeing im pretty new at this

angelbabe.org

04-15-2006, 08:55 PM

lol this is my first problem lol, it says that this is wrong <li><a href="http://angel-designs.org/forums/index.php" "target=_parent">FORUMS</a></li> and the " before the target is the problem how do i make it so that it works and isnt a problem:S

djm0219

04-15-2006, 09:10 PM

<li><a href="http://angel-designs.org/forums/index.php" target="_parent">FORUMS</a></li>

To be properly formed it should have a title attribute also.

<li><a href="http://angel-designs.org/forums/index.php" target="_parent" title="Forums">FORUMS</a></li>

angelbabe.org

04-15-2006, 09:24 PM

When i do that though it doesnt come up in a new window

djm0219

04-15-2006, 10:03 PM

That's correct.

_parent - the target URL will open in the parent frameset

Since you aren't using frames you want to use

_blank - the target URL will open in a new window

angelbabe.org

04-15-2006, 11:00 PM

thanks for ya help:)