CSS Layout issue...

Discussion in 'CSS' started by grobar, Apr 20, 2007.

  1. #1
    I have a layout issue that i can't seem to work out. Basically, i have a menu on the top right hand side, and content that i wrap around it. (if it is big enough.) The problem is that I want the article content to come BEFORE the menu content when parsing the code from top-down, and I can't seem to acheive this. Here is the css, and html....

    CSS (middleblock is a div that is the whole page, and sidebar-block is the menu block, which i;ve floated right, inside of the "middleblock.)

    
    #middleblock
    {
    margin: 15px auto;
    width: 956px;
    overflow: hidden;
    text-align: left;
    }
    
    #sidebar-block
    {
    margin-left: 20px;
    margin-bottom: 15px;
    width: 245px;
    float: right;
    text-align: center;
    }
    
    Code (markup):
    HTML
    
    <div id="middleblock">
    **I want the article to go here, then the menu, which shoudl be aligned top right, to come next in the code...
    	<div id="sidebar-block">
            menu items
            </div>
    </div
    
    
    Code (markup):
    any ideas?
     
    grobar, Apr 20, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    The way things work, if you want your main content to wrap the sidebar (if long enough), the sidebar must be floated as either a descendant of content or as a sibling. In either case, the float element must precede the static element.

    The alternative is to float the content and make the sidebar a static sibling. There would be no wrapping around the sidebar, only two columns.

    cheers,

    gary
     
    kk5st, Apr 20, 2007 IP