WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > [SOLVED] Floating issues

Reply
  Thread Tools Display Modes
Old 22nd August 10, 11:28 AM   #1
IMPtheIMP
WLC Member
 
IMPtheIMP's Avatar
 
Join Date: Aug 2010
Posts: 3
Default Floating issues

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 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 (which I have cut down to the divs that should matter)

you can see that #box1 and #box2 are not floating.

In this picture you can see all is well:


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:left;
	border:#FC3 dotted 3px;
}

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



#box3 {
	width:200px;
	margin: 10px 0px 0 20px;
	border:#FC3 dotted 3px;
}

#box4 {
	
}


/*#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:


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 help at all would be greatly appreciated.
IMP
IMPtheIMP is offline   Reply With Quote
Old 22nd August 10, 03:55 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Floating issues

Add overflow:hidden to your content wrapper.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 23rd August 10, 01:47 AM   #3
IMPtheIMP
WLC Member
 
IMPtheIMP's Avatar
 
Join Date: Aug 2010
Posts: 3
Default Re: Floating issues

Hey thanks mate
That seems to do the trick, now, could you please explain how it works?
IMPtheIMP is offline   Reply With Quote
Old 23rd August 10, 05:39 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Floating issues

Basically, to make sure that nothing overflows, it has to contain everything first. That's how I think of it.

If you want to try to find a more detailed explination, try Googling something like, "CSS how does overflow hidden contain floats"
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 23rd August 10, 06:29 AM   #5
IMPtheIMP
WLC Member
 
IMPtheIMP's Avatar
 
Join Date: Aug 2010
Posts: 3
Default Re: Floating issues

Cheers dude your a great help :)
IMPtheIMP is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:59 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.