Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Three Column Div Side by Side

    Hello, I am new to the coding forums and I had a question about HTML/CSS.

    I am trying to create a 3 column div side by side like this:


    Here is my HTML for the whole site | colOne, colTwo, colThree are the three columns. What would be the CSS that I use? I tried a ton of different codes and such and it is just acting up weird.Also mainContent has a background color of #ebeaea.
    Code:
    <body>
    	<div id="container">
    		<div id="header">
    			<h1>Blendshape Workshop</h1>
    			<hr>
    			<ul id="nav">
    				<li><a href="#">artists</a></li>
    				<li><a href="#">tutorials</a></li>
    				<li><a href="#">store</a></li>
    				<li><a href="#">blogs</a></li>
    			</ul>
    		</div><!-- end header -->
    		<div id="jsFeatured">
    		<p><em>Javascript</em></p>
    		</div><!-- end jsFeatured -->
    		<div id="mainContent">
    				<div id="colOne" class="column">
    				<h2>Resources <img alt="Resource page" src="img/hl_link.png" /></h2>
    				<p>Lorem ipsum dolor sit amet, toto dictum aemulum quod non ait in modo invenit ubi confudit huc epulare dabo. Athenagoram rigorem nisl cum suam in deinde cepit roseo. Multa dolores in deinde cepit roseo ruens sed dominum oculos calamitatibus civitatis in rei completo litus ostendam Apollonio. Equidem deceptum in lucem in lucem genero nomine Piscatore mihi cum magna. Interrogo nata dum veniens Theophilum suum Tharsiae.</p>
    				</div><!-- end column -->
    				<div id="colTwo" class="column">
    				<h2>Featured Artists <img alt="Featured artists page" src="img/hl_link.png" /></h2>
    				<p>Lorem ipsum dolor sit amet, toto dictum aemulum quod non ait in modo invenit ubi confudit huc epulare dabo. Athenagoram rigorem nisl cum suam in deinde cepit roseo. Multa dolores in deinde cepit roseo ruens sed dominum oculos calamitatibus civitatis in rei completo litus ostendam Apollonio. Equidem deceptum in lucem in lucem genero nomine Piscatore mihi cum magna. Interrogo nata dum veniens Theophilum suum Tharsiae.</p>
    				</div><!-- end column -->
    				<div id="colThree" class="column">
    				<h2>Recent Store Items <img alt="Recent store items page" src="img/hl_link.png" /></h2>
    				<p>Lorem ipsum dolor sit amet, toto dictum aemulum quod non ait in modo invenit ubi confudit huc epulare dabo. Athenagoram rigorem nisl cum suam in deinde cepit roseo. Multa dolores in deinde cepit roseo ruens sed dominum oculos calamitatibus civitatis in rei completo litus ostendam Apollonio. Equidem deceptum in lucem in lucem genero nomine Piscatore mihi cum magna. Interrogo nata dum veniens Theophilum suum Tharsiae.</p>
    				</div><!-- end column -->
    		</div><!-- end mainContent -->
    	</div><!-- end container -->
    </body>

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Here you go... very simple. Just change the colors and whatnot.

    Code:
    #mainContent {
    	width: 1000px;	
    }
    
    
    .column{
    float: left;
    width: 25%;
    height: 500px;
    min-width: 200px;
    margin: 10px;	
    }
    
    #colOne {
    	background: green;
    }
    
    #colTwo {
    	background: red;
    }
    
    #colThree {
    	background: blue;
    }

  • Users who have thanked Mr. for this post:

    TheSilverShield (09-08-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Great that works except the fact some reason every time I do this it clears the mainContent background color.

    I got a free host to show you.
    http://blendsw.comoj.com/

    Also how do I make the height fluid to whatever text is there? 100% or what?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    If you want expand height according to content, than set

    Code:
    Height:auto;

  • Users who have thanked vikram1vicky for this post:

    TheSilverShield (09-08-2011)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by TheSilverShield View Post
    Great that works except the fact some reason every time I do this it clears the mainContent background color.

    I got a free host to show you.
    http://blendsw.comoj.com/

    Also how do I make the height fluid to whatever text is there? 100% or what?
    Add

    overflow: auto;

    to your mainContent div CSS. This clears your floats and restores normal page flow, which is why your background color isnt showing.
    Teed

  • Users who have thanked teedoff for this post:

    TheSilverShield (09-08-2011)

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you, much appreciated. It all worked. The 3-div float confuses me a bit. Guess practice makes perfect.

    EDIT: By the way why would I use overflow: auto; and not clear: both; ?

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by TheSilverShield View Post
    Thank you, much appreciated. It all worked. The 3-div float confuses me a bit. Guess practice makes perfect.

    EDIT: By the way why would I use overflow: auto; and not clear: both; ?
    I personally like the overflow technique, but here is a good article on the two methods.
    Teed

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    overflow is used for elements which has floated children in it.....
    means overflow used for inside adjustment of any element...


    clear:both works for outside of element... It restrict an element to be floated with its next or previous floated elements...


  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by vikram1vicky View Post
    overflow is used for elements which has floated children in it.....
    means overflow used for inside adjustment of any element...


    clear:both works for outside of element... It restrict an element to be floated with its next or previous floated elements...

    That is correct. The reason why overflow method is recommended though is because of the new web standards of content and style being separated. clear method is bloated code in your markup, whereas overflow can be done in your stylesheet, therefore removed from content. Both work though!
    Teed

  • #10
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    overflow is used for elements which has floated children in it.....
    means overflow used for inside adjustment of any element...


    clear:both works for outside of element... It restrict an element to be floated with its next or previous floated elements...

    Sorry to be a pain but could you explain more about what you mean by clear:both works on outside elements.

    I understand the overflow part. So for example if I had this:

    Code:
    <div id="mainContent">
       <div id="colLeft">
       This is the left column.
       </div>
       <div id="colRight">
       This is the right column.
       </div>
    </div>
    <div id="footer">
    This is the footer.
    </div>
    I would clear footer right? or would the footer have to be inside the mainContent for it to clear?

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by TheSilverShield View Post
    Sorry to be a pain but could you explain more about what you mean by clear:both works on outside elements.

    I understand the overflow part. So for example if I had this:

    Code:
    <div id="mainContent">
       <div id="colLeft">
       This is the left column.
       </div>
       <div id="colRight">
       This is the right column.
       </div>
    </div>
    <div id="footer">
    This is the footer.
    </div>
    I would clear footer right? or would the footer have to be inside the mainContent for it to clear?
    Overflow method works on this example. It clears the floats and returns pages to normal document flow after the floated elements, thus the footer would be rendered under mainContent the way you intend.
    Teed

  • #12
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Overflow method works on this example. It clears the floats and returns pages to normal document flow after the floated elements, thus the footer would be rendered under mainContent the way you intend.
    Would you mind giving me an example of when you would use clear:both?

    Sorry if I am being a pain just want to learn this because I really enjoy web development and plan on doing a lot more websites/wp themes in the future

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Did you read the article I posted? Using clear: both WITHIN your html markup is now discouraged because it does not adhere to new web standards of separating content from presentation. It would work the same as overflow auto, as far as I know, but setting overflow: auto IN your stylesheet will validate to current standards.
    Teed

  • #14
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TheSilverShield View Post
    Thank you, much appreciated. It all worked. The 3-div float confuses me a bit. Guess practice makes perfect.

    EDIT: By the way why would I use overflow: auto; and not clear: both; ?
    overflow: hidden; hide the horizantal or vertical bar into your div

  • #15
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright that is fine. Thank you everyone for the help. Appreciate it!


  •  

    Posting Permissions

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