...

View Full Version : Floating issues



IMPtheIMP
08-22-2010, 11:05 AM
Hey

I have reached the point of desperation and I am on the verge of losing my sanity over this. I'm new to the coding forum business so I appoligize if I'm not doing this correctly or effeciently.

Ok here goes:

Basically I'm making a basic XHTML 1.0 transitional site in Dreamweaver CS4.
I have a <div>#container <div>#striped <div>#content
and within these are 2 other divs.
In the following code you can see that #box1 and #box2 are not floating.

In this picture you can see all is well:
http://i660.photobucket.com/albums/uu327/IMP-the-IMP/Capture1.jpg

This is the code


* {margin:0px; padding:0px;}

body {
font-size:67%;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
color:#FC3;
}

h1 {
font-size:1.7em;
color:#FF6;
text-decoration:none;
}

h2 {
font-size:1.3em;
margin-bottom:4px;
}

#container {width:900px; margin:auto;}

#header {
height:310px;
background-image:url(images/Header_02.jpg)
}

#nav {
width:800px;
height:60px;
margin:auto;
margin-bottom:10px;
position:relative;
}

#nav ul {
width:800px;
}

#nav li {
list-style-type:none;
}

#nav li a {
display:block;
width:190px;
height:60px;
text-decoration:none;
text-indent:-999999px;
}

#nav #home {
top:0px;
left:0px;
width:130px;
height:60px;
background:url(images/NavHomeUp_04.jpg) no-repeat 0 0;
float:left;
}

#nav #about {
top:0px;
left:130px;
width:151px;
height:60px;
background:url(images/NavAboutUp_05.jpg) no-repeat 0 0;
float:left;
}

#nav #gallery {
top:0px;
left:260px;
width:151px;
height:60px;
background:url(images/NavGalleryUp_06.jpg) no-repeat 0 0;
float:left;
}

#nav #forum {
top:0px;
left:390px;
width:175px;
height:60px;
background:url(images/NavForumUp_07.jpg) no-repeat 0 0;
float:left;
}

#nav #links {
top:0px;
left:600px;
width:190px;
height:60px;
background:url(images/NavLinksUp_08.jpg) no-repeat 0 0;
float:left;
}

#nav #home a:hover {
background:url(images/NavHomeOver_04.jpg);
}

#nav #about a:hover {
background:url(images/NavAboutOver_05.jpg);
}

#nav #gallery a:hover {
background:url(images/NavGalleryOver_06.jpg);
}

#nav #forum a:hover {
background:url(images/NavForumOver_07.jpg);
}

#nav #links a:hover {
background:url(images/NavLinksOver_08.jpg);
}


#striped {background:url(stripes2.jpg); width:750px; margin:auto;}

#content {
width:520px;
margin:auto;
border-left:5px solid #FF0;
border-right:5px solid #FF0;
}

#conHeader {
margin:20px 0 20px 0;
text-align:center;
}

#box1 {
width:200px;
float:none;
border:#FC3 dotted 3px;
}

#box2 {
width:250px;
float:none;
margin: 0px 30px 0 0px;
text-align:inherit;
}



/*#footerSpacer {
height:10px;
} */
#footer {
clear:both;
width:750px;
height:60px;
margin-top:15px;
background:#666;
margin-bottom:5px;
margin:auto;
}

</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="nav">
<ul id="nav">
<li id="home"><a href="index.html">home</a></li>
<li id="about"><a href="index.html">about</a></li>
<li id="gallery"><a href="index.html">gallery</a></li>
<li id="forum"><a href="index.html">forum</a></li>
<li id="links"><a href="index.html">links</a></li>
</ul>
</div>
<div id="striped">
<div id="content">

<div id="conHeader">
<h1><img src="images/headerL.png" width="340" height="54" /></h1>
</div>

<div id="box2">
<h1>BFF Rape</h1>
<h2>22/08/20</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan congue nulla a dapibus. Aliquam enim elit, accumsan ac faucibus id, varius non arcu. Aenean et massa tortor. Aliquam nec ante velit, eget lobortis nunc. Maecenas lacinia auctor mi interdum dapibus. Proin condimentum nibh in urna pellentesque egestas. Mauris eget arcu quis erat volutpat ullamcorper. Aliquam nec ante velit, eget lobortis nunc. Maecenas lacinia auctor mi interdum dapibus. Proin condimentum nibh in urna pellentesque egestas. M </p>
</div>

<div id="box1"><img src="images/PracIMG.jpg" width="200" height="170" /></div>
</div>

</div>
</div>


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



But the moment I float a div for instance; #box1, this happens:
http://i660.photobucket.com/albums/uu327/IMP-the-IMP/Capture2.jpg

This is the same thing that happens when I float any/each of the #box divs either left or right, more or less.
The moment I float one of them, it falls below all the divs in which it is contained. I asked my teachers and they were stoked, they couldn't figure it out.

Please, any suggestions or tips would be greatly appreciated.
IMP

abduraooft
08-22-2010, 11:18 AM
Basically I'm making a basic XHTML 1.0 transitional site in Dreamweaver CS4. When making something new, always stick with a strict DOCTYPE.

Now, take a look at http://bonrouge.com/2c-hf-fixed.php to see how to make a good 2 column fixed layout.

IMPtheIMP
08-22-2010, 11:31 AM
While I appreciate the suggestion abduraooft, I don't think the link really helps me. I have what seems to be a simple problem of floating divs, which I've been looking at for so long I can't see what may very well be an obvious flaw in the code.

ahayzen
08-22-2010, 12:17 PM
Hi IMPtheIMP and welcome to the coding forums.

You said that they were not floating in the first example then you said that this was the code for the second box in your first example?


#box2 {
width:250px;
float:none;
margin: 0px 30px 0 0px;
text-align:inherit;
}


If this is for the first example then try changing it to this:



#box2 {
width:250px;
float:left;
margin: 0px 30px 0 0px;
text-align:inherit;
}


Also posting your HTML code may be handy if this doesn't work.

Andy

ahayzen
08-22-2010, 12:19 PM
Also after the two floating divs try putting



<br style="clear:both"/>


This should stop the second image from happening.

Andy

IMPtheIMP
08-22-2010, 12:28 PM
Hey ahayzen,

Sorry about my code posting; in the first picture both divs were not floating. The code was supposed to show this but I made a mistake which I have now corrected.

Dude, I don't know what you did, but that piece of code you gave me worked perfectly (so far) Thanks a bundle :D

But do you mind elaborating on what it does please?

ahayzen
08-22-2010, 12:33 PM
Hi

Well the first change was box2 to float. If you want some divs or whatever to float you have to tell them all to float. So for you box 1 and 2 need to float.

The second one stops the parent div (#content) from stopping to early and tells it to stretch over the divs and images. It basically adds another line at the bottom.

Andy

IMPtheIMP
08-22-2010, 12:42 PM
Yeah, I know about floating divs and such.
My usual action would have been to float both divs left, but then I encountered that problem.
Thanks to your coding however I can float both divs without any trouble.

Cheers mate, you're a great help :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum