SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs stacked on top of each other

    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. #2
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,774
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is a great tut all about floats: http://css.maxdesign.com.au/floatutorial/

    You should find the solution there
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got a couple ideas, but they're going to require some extra markup. Let me see what I can do.

  6. #6
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Zealot ejg's Avatar
    Join Date
    Jun 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    .negMar {
         margin-top: -447px;
    }
     
    <div class="negMar">
         <div id="leftcol"></div>
         <div id="midcol"></div>
         <div id="rightcol"></div>
    </div>

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :
    Code:
    .oneColElsCtrHdr #container {
    	background: transparent;
    	margin: 0 auto;
    	text-align: left;
    	width: 800px;
    	background: transparent url(../images/CleanDrinkWater.gif) no-repeat left 22px; 
    }
    
    .oneColElsCtrHdr #mainContent {
    	margin: 0 auto;
    	padding: 15px;
    	width: 770px;
    	overflow: visible;
    	clear: both;
    }
    
    .oneColElsCtrHdr #mainContent #leftcol {
    	background: transparent;
    	display: inline;
    	float: left;
    	min-height: 424px;
    	margin: 0;
    	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. #12
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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