Web Analytics Made Easy - StatCounter Three Column Div Side by Side - CodingForum

Announcement

Collapse
No announcement yet.

Three Column Div Side by Side

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Three Column Div Side by Side

    Hello, I am new to the Coding Forum 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>
    Tags: None
  • #2
    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;
}

    Comment

    • #3
      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.
      Attention Required! | Cloudflare
      http://blendsw.comoj.com/


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

      Comment

      • #4
        If you want expand height according to content, than set

        Code:
        Height:auto;

        Comment

        • #5
          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.
          Attention Required! | Cloudflare
          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

          Comment

          • #6
            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; ?

            Comment

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

              Comment

              • #8
                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...

                Comment

                • #9
                  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

                  Comment

                  • #10
                    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?

                    Comment

                    • #11
                      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

                      Comment

                      • #12
                        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

                        Comment

                        • #13
                          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

                          Comment

                          • #14
                            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

                            Comment

                            • #15
                              Alright that is fine. Thank you everyone for the help. Appreciate it!

                              Comment

                              Previous template Next
                              Working...
                              X
                              😀
                              🥰
                              🤢
                              😎
                              😡
                              👍
                              👎