Going crazy with Float

Sporky · #1 (**permalink**) Nov 28th, 2006, 11:57

Hello Everybody,
I just joined this Forum and hope that you can help me. I am going crazy by trying to position to div tags (content & right column) next to each other and can't find the problem as this happens the first time

I am having one div as a container into which I inserted a banner div, navi div, content div and one right column div. I do it this way as this helps to get the layour right for IE and FF. Anyway as soon as I try to float the content and the right column they jump out of the container and screw up the layout.

Did someone of you had the same problem and was able to fix it?

Your help would be really appreciated!

Best wishes
Sporky

Ryan Fait · #2 (**permalink**) Nov 28th, 2006, 12:23

Floats are a tricky thing to get the hang of. However, a link would be best.

Sporky · #3 (**permalink**) Nov 28th, 2006, 13:09

Hi,
Thank you for your response. Since the site is not launched yet, please see code and script below:

</head>
<body>
<div id="divContainer">
<div id="divBanner"></div>
<div id="divNavi">Content for id "divNavi" Goes Here</div>
<div id="divMain">Content for id "divMain" Goes Here</div>
<div id="divRightNavi">Content for id "divRightNavi" Goes Here</div>
</div>
<div id="divfooter">Content for id "divfooter" Goes Here</div>
</body>
</html>

SCRIPT:
divContainer {
width: 70%;
border: thin solid #CCCCCC;
background-color: #FFFFFF;
margin-left: 15%;
}
#divBanner {
width: 100%;
background-image: url(../images/banneridee2.gif);
background-repeat: repeat-y;
height: 150px;
}
#divNavi {
padding: 3px 0px 3px 5%;
background-color: #CCCCCC;
width: 95%;
}
#divMain {
float:left;
width: 60%;
padding-left: 5%;
background-image: url(../images/logo_water_background.gif);
padding-top: 3%;
background-repeat: no-repeat;
height: 400px;
text-align: justify;
}
#divRightNavi {
float:right;
width:30%;
height: 400px;
border-left-width: thin;
border-left-style: dotted;
border-left-color: #CCCCCC;
}

Hope this is clear and you can see where I am going wrong.
Thank you so much for your help.
Regards
Sporky

ukgeoff · #4 (**permalink**) Nov 28th, 2006, 13:49

You might find the Templates tutorial, available via the link in the sticky at the top of the css forum, helpfull.

Ryan Fait · #5 (**permalink**) Nov 28th, 2006, 18:13

Ah, I think I see the problem. When using floats, you are essentially taking the elements out of the normal flow of the document. To sort of force the browser to recognize that these elements are taking up space, you need more more class and div.

Code: Select all

.clear {
    width: 100%;
    height: 1px;
    margin: 0 0 -1px;
    clear: both;
}

Code: Select all

<body>
    <div id="divContainer">
        <div id="divBanner"></div>
        <div id="divNavi">Content for id "divNavi" Goes Here</div>
        <div id="divMain">Content for id "divMain" Goes Here</div>
        <div id="divRightNavi">Content for id "divRightNavi" Goes Here</div>
        <div class="clear"></div>
    </div>
    <div id="divfooter">Content for id "divfooter" Goes Here</div>
</body>

That should do it for you. I wrote an article about clearing floats. You'll find it at the bottom of the sticky in this forum if you're interested in reading up on it a bit more.

Daniel · #6 (**permalink**) Nov 28th, 2006, 19:34

I love sporks!!

Sporky · #7 (**permalink**) Nov 29th, 2006, 09:28

Hi,
Thanks a lot for this. I will definitely try this one, but have found another solution in the meantime by just giving a fixed height to the container div and that also worked well.
Best wishes
Sporky

Ryan Fait · #8 (**permalink**) Nov 30th, 2006, 01:52

The only problem with that is if the content exceeds that, the container won't expand.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help!! probably stupid Q. but I'm going crazy 'cos of it	nutbolt	Starting Out	1	Feb 6th, 2007 16:44
Problems with float:left float:right	nvidiajoe	Web Page Design	8	Nov 17th, 2006 20:24
Crazy menus...	escaflowne11	Web Page Design	2	Oct 1st, 2006 16:56
What I'm working on (idea is crazy)	buyseconds	Introduce Yourself	4	Nov 18th, 2005 13:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Going crazy with Float