Divs stacked on top of each other

HTML & CSS
1

Hi friends,

I am absolutely stuffed! STUMPED! Sorry, Monty Python moment.

I’m working out the initial page for a site and cannot figure out where I’m going wrong. Amongst several issues I’m having, what is frustrating me most are the divs in the main body. There are 3 divs floated left to create 3 columns. The left column is a single text box(with the div bordered in green), the mid column is the logo(div bordered red) and the right column with two text boxes (div bordered yellow). The first two div float properly, but the third one slides over on top of the middle one.

I’d put code on here, but don’t really know what to put short of putting everything. So, I’ll just show you the link and humbly request (i.e. beg) you to take a look and share any insights.

I appreciate your time and feedback.
http://www.cleandrink.cc/aboutcleandrink.html

2

Here is a great tut all about floats: http://css.maxdesign.com.au/floatutorial/

You should find the solution there :slight_smile:

3

Can you show me (visually) how you want it to look? I work better when I have a visual reference (of how it’s supposed to appear) to look at.

4

Datura, thanks for the tutorial. Lots of good info there.

Dan, thanks for taking an interest. I’ve torn this thing apart piece by piece and nothing is working. In my (limited) experience, I’ve yet to run into floats stacking up like this.

Here is a page showing a screen capture of the actual design and how it is supposed to someday end up looking.
http://www.cleandrink.cc/preview.html
(the black and blue will extend out infinitely in the background)

Any insights to point me in the right direction are appreciated.

5

I’ve got a couple ideas, but they’re going to require some extra markup. Let me see what I can do.

6

I’m at a complete loss. As much as it pains me I may throw this out and do it over from scratch. I have taken piece by piece out of this. Googled. Read. Done tutorials. I cannot figure out what I’ve done wrong.

If you have 3 divs in a row. Float them to create 3 side by side columns.
What would cause those divs to stack on top of each other instead of butting up against each other???

BTW, this is on a Mac using Firefox. Generally, it’s been the same results elsewhere but I don’t always have easy access to a winDOHS! machine, so I’m not sure what results I’m getting there if that’s what you are looking at.

7

It’s the negative margin that you are using to move the divs up. Put the three columns in another div and apply the negative margin to that.

.negMar {
     margin-top: -447px;
}

<div class="negMar">
     <div id="leftcol"></div>
     <div id="midcol"></div>
     <div id="rightcol"></div>
</div>
8

Instead of CleanDrinkWater.gif being a background to a div and everything being pulled negatively back over it, the image should be a background to #mainContent instead (and overflow set to surround the internal floats) - then you can get rid of all the negative top margins. #mainContent is also too narrow by 15px to fit the three floated divs into anyway.

9

thanks ejg & centauri,

the negmar idea sort of worked but sort of didn’t but showed me that i had way too much neg mar going on. I’m backing way up and simplifying. for the moment i’ve taken the water background out and when i get ready to put it back, i’m going to try your suggestion centauri. I’ll post results when i get there.

I really appreciate everyone’s input!!!

10

ok centauri. that worked out solving the problems i was having. thanks.

the issue i have now is what i originally had well before i first posted on here and that was where i went in the wrong direction. so now i’m back to where i was back then.

you can look at a new link to see the issue
http://cleandrink.cc/aboutcleandrink_2.html

when i put the background image (the pouring water) into the main content, i have to raise it up (margin: -110px 0 0 0;) because the design calls for the water to pour over the header section. for reasons i’m not seeing it starts, then suddenly disappears.

i’m not sure if i should cut off that pouring water stream and line it up separately or if i should take it out off the maincontent div and relocate it or leave it. I could not previously and am still struggling to see what prevents it from working as a background image in the maincontent div. maybe that part extending up over the header??

Along with that, looking ahead, i have to somehow account for the maincontent div expanding downward should i have enough text to heighten those 3 floats. I’ll need to create a way to fill that expanded background with the light blue of the water.

11

If the pouring water image needs to go up there, then use it as a background to #container instead, and it can be positioned a bit from the top to line up properly. #mainContent then would not need the negative top margin, but should have the clear set to clear the floated navigation properly, which then means the top margin on #leftcol is not needed :

.oneColElsCtrHdr #container {
	background: transparent;
	margin: 0 auto;
	text-align: left;
	width: 800px;
	[COLOR="Red"]background: transparent url(../images/CleanDrinkWater.gif) no-repeat left 22px;[/COLOR]
}

.oneColElsCtrHdr #mainContent {
	[COLOR="Red"]margin: 0 auto;[/COLOR]
	padding: 15px;
	width: 770px;
	overflow: visible;
	[COLOR="Red"]clear: both;[/COLOR]
}

.oneColElsCtrHdr #mainContent #leftcol {
	background: transparent;
	display: inline;
	float: left;
	min-height: 424px;
	[COLOR="Red"]margin: 0;[/COLOR]
	padding: 5px;
	width: 301px;
	border: 1px solid green;
}

To continue the background, you can set the background color of #container but you would then also have the include the header part in the CleanDrinkWater.gif graphic.

12

thanks to everyone for helping me get that resolved. Basically i had gone down the wrong path and things just kept getting worse. the big issue was the water background. i had to snap that top spout of water off and float it independently. once i did that, the rest of the water cooperated quite readily.