Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Hi,

    I have:

    <div id="header">
    <div id="navbar">
    <div id="content">
    <div id="rightcol">

    I would like them to be displayed in this order:

    <div id="header"> <div id="navbar">
    <div id="content">
    <div id="rightcol">

    I am new to this so am struggling a bit. I have managed to get those highlighted in red into position but can't get 'rightcol' to appear next to 'content'.

    This is the CSS I have used...

    HTML Code:
    #header {
    	float: left;
    }
    #content {
    	clear: left;
    }
    I haven't got any CSS in for 'navbar' or 'rightcol' yet and can't help but think I need some. Everything I have tried hasn't worked.

    Please help me!!

    Thanks.

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    The clear ends the float.

    There are many ways to accomplish what you're trying to do. I would change stuff around and put them in containers as such:

    HTML Code:
    <div id="leftcolumn">
       <div id="header"></div>
       <div id="content"></div>
    </div>
    
    <div id="rightcolumn">
       <div id="navbar"></div>
       <div id="rightcol"></div>
    </div>
    Then float #leftcolumn and #rightcolumn "left"
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Thank you very much, I will try that out.

  5. #4
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Having problems...

    <div id="header"> <div id="navbar">
    <div id="content">
    <div id="rightcol">

    'header' is 300px wide.
    'content' is 550px wide.

    I think I really need two 2x1 layouts on my page here, one above the other. Is this possible?

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    How about this:

    <body>
    <div id="wrapper">
    div id="upper">
    <div id="header"></div>
    <div id="navbar"></div>
    </div>

    <div id="lower">
    <div id="content"></div>
    <div id="rightcol"></div>
    </div>
    </div>
    </body>


    where: header and navbar are both float:left;
    and: content and rightcol are both float:left;

    upper is not floated
    lower is not floated


  7. #6
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    If the content is not the same width as the header, then it's not exactly two columns. Why not have the navigation part of the header?

    Then you can design a site w/ a header and two columns.
    HTML Code:
    <div id="header">
       <div id="nav"></div>
    </div>
    <div id="main">
       <div id="content"></div>
       <div id="rightcol"></div>
    </div>
    Shani

    I have an eye for detail like you'd never believe.

  8. #7
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Thanks for suggestions. I will try them out later.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Rob ...

    Give us a link to what you have so far ...

    You can see that there are going to be multiple solutions to this.
    Perhaps this would be an interesting thing to see how various people
    would solve it.


  10. #9
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Quote Originally Posted by mlseim
    How about this:

    <body>
    <div id="wrapper">
    div id="upper">
    <div id="header"></div>
    <div id="navbar"></div>
    </div>

    <div id="lower">
    <div id="content"></div>
    <div id="rightcol"></div>
    </div>
    </div>
    </body>


    where: header and navbar are both float:left;
    and: content and rightcol are both float:left;

    upper is not floated
    lower is not floated
    That worked, thanks.

    I will post my site up here when its finished. It looking OK so far


Remove Ads

Posting Permissions

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

Search tags for this page

2x2 css grid
,
2x2 div grid
,
2x2 div layout 250px wide
,
2x2 grid css
,
2x2 layout with div
,

css 2x2 grid

,
css for page layout 2x2
,
html 2x2 grid
,
html grid layout 2x2
,
web development 2x1 layout
Click on a term to search for related topics.
All times are GMT -6. The time now is 12:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com