SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to prevent a floated sidebar from being bumped below main content?

    I have a two column floated layout with a content area and a sidebar element. The content element and sidebar are sibling elements, both floated left with defined widths.

    The problem I have is that when the content area has an image or video that's wider than the defined width of the content area, the sidebar gets floated below the content area.

    What would be the preferred css structure to prevent this?

    HTML Code:
    <div class="main">
    <div class="content">Content area here</div>
    <div class="sidebar">Sidebar content here</div>
    </div>
    Code:
    .main {margin:0 auto 0 auto; text-align:left; width:977px; padding:0;background:#fff;}
    .content {float:left;width:631px; padding:0 20px; margin:0; min-height:475px; border-right:1px dotted #ccc;}
    .sidebar {float:left; width:265px; min-height:475px; color:#777; padding:0 10px 5px 30px; border-left:1px dotted #ccc; margin:0 0 0 -1px;}

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The easiest way to prevent this would be to add an overflow to the element that hides basically cuts off content exceeding the boundary of the element, see the below example.

    [CODE="CSS"].content {
    overflow: hidden;
    }[/CODE]


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
  •