Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Floating issues

  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 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:


    This is the code
    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:


    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
    Last edited by IMPtheIMP; 08-22-2010 at 12:21 PM. Reason: Mistake in copied coding

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    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?
    Code:
    #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:

    Code:
    #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

  • #5
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Also after the two floating divs try putting

    Code:
    <br style="clear:both"/>
    This should stop the second image from happening.

    Andy

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    But do you mind elaborating on what it does please?

  • #7
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •