SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having content flow problem

    I know I did something wrong, I just can't figure out what.

    You'll see the two small action images, mid-page on the right. I want them side by side but can't figure out what I'm missing.

    Here's the reference url:
    http://www.xswizcorex.com/eks/

    and the css is here:
    http://www.xswizcorex.com/eks/css/index.css

    Thanks for any guidance.
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You'll need to float the .inset box, but it will still be too wide. You have 380px width to work with, because that's the width of the container. The inset boxes are 181px each. That makes 362px wide. BUT ... each inset box has 7px left margin, and also six pixels left and right. Padding and margin add to the total width, so the full width of your two inset divs is

    181 + 181 + 7 + 7 + 6 + 6 + 6 + 6 = 400px.

    So you'll need to reduce the width of the inset box by altering those dimensions.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, your advice actually made me realize a few other corrections I needed to make.

    Is it obvious why my footer seems to be in the content flow of col1? In my html it is clearly out of that div.
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by swizcore View Post
    Is it obvious why my footer seems to be in the content flow of col1? In my html it is clearly out of that div.
    Because col2 is positioned absolutely, no other elements will see it. That's why position: absolute should not be used for page layout. It is a mess to work with. It would be better to have a wrapping div for your two columns and float the column divs inside that. Give the wrapper overflow: hidden, and everything will work nicely.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, are you saying create a "big box" with and put the two columns in it, floated let and right?

    What does the overflow:hidden achieve?
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by swizcore View Post
    Ok, are you saying create a "big box" with and put the two columns in it, floated let and right?
    Yes, that's the most common way to do it.

    What does the overflow:hidden achieve?
    If you have a box with only floated contents, the content (in this case, the floated columns) will hang out of the box. That wouldn't cause you too much troble, but you might have a little trouble getting the top spacing of the footer just right. The easiest way to make the box wrap around the columns is to apply overflow: hidden to it. (It would be a bigger issue if your box had a background color, for example. Without something like overflow: hidden, the background color wouldn't appear, because the box would have zero height.)

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you rock, thanks again.
    So simple to change and more importantly it makes sense to me.
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great! I'm glad that made sense. Your layout is much better now. Because you have overflow: hidden on the content wrapper, you don't need clear: both on the footer, but it would be worth enabling and disabling those values to compare results so you can see what effect overflow: hidden has. (You can easily turn these on/off with something like Firebug for Firefox or the native dev tools in browsers like Chrome of Safari. Just click right click on an element and choose Inspect Element to play around with this. It's quite fun.)

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a minimally invasive method of creating a submenu off of my "products menu item" that matches it graphically? Or is the way my menu is setup not going to lend itself to such an addition?
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by swizcore View Post
    Is there a minimally invasive method of creating a submenu off of my "products menu item" that matches it graphically? Or is the way my menu is setup not going to lend itself to such an addition?
    It's quite feasible. Drop menus are common. Mind you, my preference would be not to have a drop menu, but to have options to click when a visitor is in the Products section. But I just don't like dropdowns, so I'm biased.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that was the plan I have begun working on. I've just never created a css based submenu before and always wanted to give it a shot. Perhaps later.
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here's a nice model to start with, if/when you decide to try one:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the link. I assume that could be modded to use images?
    Im a designer who deconstructs code in an attempt to
    understand development. Its a rough road.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by swizcore View Post
    I assume that could be modded to use images?
    Yes, certainly.


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
  •