...

View Full Version : Three Column Div Side by Side



TheSilverShield
09-07-2011, 11:03 PM
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:
http://i56.tinypic.com/2qjk8df.png

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.


<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>

Mr.
09-08-2011, 02:10 AM
Here you go... very simple. Just change the colors and whatnot.



#mainContent {
width: 1000px;
}


.column{
float: left;
width: 25%;
height: 500px;
min-width: 200px;
margin: 10px;
}

#colOne {
background: green;
}

#colTwo {
background: red;
}

#colThree {
background: blue;
}

TheSilverShield
09-08-2011, 07:58 PM
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?

vikram1vicky
09-08-2011, 08:15 PM
If you want expand height according to content, than set


Height:auto;

teedoff
09-08-2011, 08:20 PM
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.

TheSilverShield
09-08-2011, 08:26 PM
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; ?

teedoff
09-08-2011, 08:41 PM
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 (http://www.quirksmode.org/css/clearing.html)is a good article on the two methods.

vikram1vicky
09-08-2011, 08:48 PM
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...

:)

teedoff
09-08-2011, 08:58 PM
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! :thumbsup:

TheSilverShield
09-08-2011, 10:03 PM
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:


<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?

teedoff
09-08-2011, 10:07 PM
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:


<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.

TheSilverShield
09-08-2011, 10:11 PM
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 :)

teedoff
09-09-2011, 01:01 AM
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.

mindblaster
09-09-2011, 09:30 AM
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

TheSilverShield
09-12-2011, 05:06 PM
Alright that is fine. Thank you everyone for the help. Appreciate it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum