SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: How to make 3 divs inside a div and center them with equal margins

    Hi Guys,

    First time poster here and a total noob at css and programming. Please find the photo attached.




    Basically I want to have three separate divs inside a container. I can get the left and middle one corrent but the right one does not seems to work. Any suggestions would be greatly appreciated.

    Thank you!


    P.S here is the code. I wanted to try it out first hence the inline css style.


    body {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    #wrapper {
    background-color: #600;
    width: 960px;
    height: 1200px;
    margin-right: auto;
    margin-left: auto;
    }
    #header {
    background-color: #665;
    clear: none;
    float: none;
    width: 960px;
    height:118px;
    }

    #slider {
    background-color: #F0F;
    clear: none;
    float: none;
    height: 398px;
    width: 960px;
    }


    #video {
    clear: none;
    float: none;
    height: 372px;
    width: 960px;
    margin-top:22px;
    margin-left:11px;

    }
    #leftvid {
    background-color: #0FF;
    clear: none;
    float: left;
    height: 350px;
    width: 300px;

    }
    #midvid {
    background-color: #00F;
    clear: none;
    float: none;
    height: 350px;
    width: 300px;
    margin-left:auto;
    margin-right:auto;
    }
    #rightvid {
    background-color: #FC0;
    clear: none;
    float: right;
    height: 350px;
    width: 300px;


    }

    #footer {
    background-color: #666;
    clear: both;
    float: none;
    width: 100%;
    height: 62px;
    }
    -->
    </style>

    </head>

    <body>
    <div id="wrapper">
    <div id="header">Content for id "header" Goes Here</div>
    <div id="slider">Content for id "slider" Goes Here </div>


    <div id="video">
    <div id="leftvid">Content for id "leftvid" Goes Here </div>
    <div id="midvid">Content for id "midvid" Goes Here</div>
    <div id="rightvid">Content for id "rightvid" Goes Here</div>
    </div>

    <div id="footer">Content for id "footer" Goes Here</div>
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi WanaBWebdesigner. Welcome to the forums.

    There are lots of options here, such as simply floating all three boxes. But if you want to keep the middle one unfloated like it currently is, you have to swap the order of the second and third in the HTML, like so:

    Code:
    <div id="leftvid">Content for id "leftvid" Goes Here </div>
    <div id="rightvid">Content for id "rightvid" Goes Here</div>
    <div id="midvid">Content for id "midvid" Goes Here</div>
    A floated element coming after a full-width non-floated object will sit below it.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Weclocme WannaB,

    just adding to what ralph said:

    Floated elements must be BEFORE unfloated content in the source code, as a floated element cannot be displayed higher than the bottom edge of an element that precedes it in the source code.

    SEO and semantics some times will not allow us to switch elements around so liberally.

    So really what is happening here is you are placing one div at the center of the container and another at each edge. The latter part of this is easy with float:left|right; and the first part is a centering a float trick, accomplished with position relative and a negative margin.


    Code:
    #video div {
    height: 350px;
    width: 300px;
    }
    #leftvid {
    background-color: #0FF;
    float:left;
    }
    #midvid {
    background-color: #00F;
    float:left;
    position: relative;
    left:50%;
    margin-left: -450px;
     }
    #rightvid {
    background-color: #FC0;
    float:right;
    }
    #video{min-width:900px; overflow:hidden; background: green; margin:0 auto;}

    BTW, it's not good practice to slap IDs on every element.

    Hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thank you so much guys, I really appreciate your help. I will keep that i mind about IDs - thanks

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Weclocme WannaB,

    just adding to what ralph said:

    Floated elements must be BEFORE unfloated content in the source code, as a floated element cannot be displayed higher than the bottom edge of an element that precedes it in the source code.

    SEO and semantics some times will not allow us to switch elements around so liberally.

    So really what is happening here is you are placing one div at the center of the container and another at each edge. The latter part of this is easy with float:left|right; and the first part is a centering a float trick, accomplished with position relative and a negative margin.


    Code:
    #video div {
    height: 350px;
    width: 300px;
    }
    #leftvid {
    background-color: #0FF;
    float:left;
    }
    #midvid {
    background-color: #00F;
    float:left;
    position: relative;
    left:50%;
    margin-left: -450px;
     }
    #rightvid {
    background-color: #FC0;
    float:right;
    }
    #video{min-width:900px; overflow:hidden; background: green; margin:0 auto;}

    BTW, it's not good practice to slap IDs on every element.

    Hope that helps.
    Please ignore my ignorance as I am a noob as you can see, but what would be the ideal way for having ids in this situation? Can I target a div without id or class?

    Thank you!

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It is a better practice to use classes than ids. IDs should be reserved for items that need to be uniquely identified, such as for on-page links (fragment identifiers) or for JavaScript targets. You can change the hash marks on your css to dots and the word "id" on the HTML page to "class" and everything should continue to work just as it does now.

    I notice that you are using fixed heights on the lower columns in your demo. Is that the way your page is designed, or do you expect the columns to extend to be the same height, or should they extend independently of one another? I'm guessing that the fixed height is likely to be a problem. What is your game plan?

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ronpat, for clearing it up.

    Regarding the fixed heights - the content of the lower boxes would not change so I though to give them a fixed height. I am not sure if it is the right way as this is my first ever attempt to convert psd to css/html.

    here is a preview of the psd( not real website, just a dummy sample)


    I would appreciate any feedback on the css fixed heights.

    Thank you!

    Here is what I am at.


  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by WanaBWebdesigner View Post
    I would appreciate any feedback on the css fixed heights.
    The only time it's relatively safe to use a fixed height is on an image. If there's text involved, you don't know how your end users have their machines configured. For example, if they have their system fonts set to display larger than usual, the text will be much bigger, and will spill out of the fixed height container and looks like a dreadful mess.

    If you want to ensure that the boxes stay the same height, there are ways to do that, such as setting the boxes to display: table-cell and setting their container to display: table.

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The only time it's relatively safe to use a fixed height is on an image. If there's text involved, you don't know how your end users have their machines configured. For example, if they have their system fonts set to display larger than usual, the text will be much bigger, and will spill out of the fixed height container and looks like a dreadful mess.

    If you want to ensure that the boxes stay the same height, there are ways to do that, such as setting the boxes to display: table-cell and setting their container to display: table.
    Thanks Ralph. I haven't played around with the display: table-cell but I will figure it out.

    Cheers

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This might give you something to build on...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?971901-CSS-How-to-make-3-divs-inside-a-div-and-center-them-with-equal-margins
    Thread: CSS: How to make 3 divs inside a div and center them with equal margins
    2013.02.08 07:11
    WanaBWebdesigner
    
    Widths of column divs are fluid.
    All columns in one row are the same height.
    Note: border-spacing applies space at edges of table, too.
    colors are applied for "looks" in this demo.
    IE8+
    -->
    <head>
        <title>3 columns</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    .video {
        display:table;
        table-layout:fixed;
        min-width:900px;         /* some minimum width is a good idea. */
        border-spacing:20px 0;   /* note that spacing is also applied to right and left ends */
        background-color:#666;
        margin:0 auto;
    }
    .video div {
        display:table-cell;
        width:33%;
        vertical-align:middle;
        border:1px solid #bbb;
        background-color:#eee;
        padding:30px;
    }
        </style>
    </head>
    <body>
    <div class="video">
        <div>Content for "leftdiv" Goes Here. </div>
        <div>Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here.</div>
        <div>Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. </div>
    </div>
    </body>
    </html>
    Cheers!

  11. #11
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope to contribute to this forum someday haha Thanks Ron. You are a legend!

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    About IDs:

    The IDs should be limited to unique elements. Even then they are kinda heavy and you might find yourself painted into a corner when trying to target a rule. To learn more google: CSS specifity).

    Also, code should be stream lined. When targeting rules, Look for PATTERNS in your mark up. You can reuse code that way. For example. Since you wanted a container with 3 divs, rather than repeat myself targeting each rule for each ID. I targeted the container's child DIVs instead. Thus I targeted all the divs at once for the applicable rules, rather than one at a time. I hope that makes sense to you.

    display:table;
    tempting , but it has a few drawbacks, not the least important of which is IE doesn't like it.

    Art Direction:
    1) you should try to anticipate how you will code something BEFORE you draw it out on Photoshop. Dont worry t will come with experience ( and paying close attention as you create your layouts). There are some thing CSS/HTML cant do, besides Just because you CAN do something doesnt mean you should.


    2) You will see that each step , in each project is very different and solutions must be developed uniquely for each. It's more about learning a thinking style for overall problem solving than commands and properties.


    3) At first I thought you wanted to have fixed width areas for your videos ( ok that kinda makes sense as the video will be specific width anyway.. that just the way videos are) and compensate by having fluid space ( gutter) between the videos. To be honest that gets quite ugly quickly. I am seeing you are going towards a fixed gutter solution. That too has a it's draw backs ( the fixed dimensions of video , for one) but it's an improvement.

    The good stuff. Something for you to reverse engineer:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    #video div {
    min-height: 350px;
    width: 33.33333%;
    float:left;
    }
    #video div a{
     display:block; 
     height:100px;
     color:#fff;
     background: #333;
     position: relative;
     overflow: hidden;
     text-align: center
     
    }
    #video div a:after{content:""; position: absolute; border: 5px solid transparent; border-bottom:15px solid silver; bottom: 0;  left:15px}
    #leftvid a:before{content:url(videhed.gif);   display:block;  }
    #midvid a:before{content:url(videhed.gif);   display:block;  }
    #rightvid a:before{content:url(videhed.gif); display:block;    }
    #video div p{ padding:15px; font:normal  80%/1.3   sans-serif; }
    #leftvid {
    margin-left: -50px;}
    #midvid {margin-left: 25px;}
    #rightvid {margin-left: 25px;}
    #video{ display:inline-block; vertical-align: top;   width:100%;  }
    .center{position: relative; margin:0 15%; overflow: hidden; padding-left: 50px;background:  silver; min-width:618px}
    .center:before, .center:after{ background: #000; content:""; position: absolute;  top:0; bottom:0; width: 25px; }
    .center:before{ background: #000; content:""; position: absolute; left:33.333333%; top:0; bottom:0; width: 26px; margin-left: -17px;}
    .center:after{ background: #000; content:""; position: absolute; left:66.66667%; top:0; bottom:0; width: 26px; margin-left: -10px;}
    		</style>
    	</head>
    	<body>
    <div class="center">
    	<div id="video">
    		<div id="leftvid">
    				<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
    				<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit ...</p>
    		</div>
    		<div id="midvid">
    				<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
    				<p>Click here to view stuff. sample of a different length of text all columns should still APPEAR equal ...</p>
    </div>
    		<div id="rightvid"> 
    				<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
    				<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ...</p>
    		</div>
    	</div>
    </div>
    	</body>
    </html>
    Fixed height, graphical header/links on top, fluid (height/width) "equal height" columns, faux gutters ( this technique will only work for solid colors/ regular patterns). required only one addition wrapper element, which may be present and available in your overall markup anyway.

  13. #13
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Melbourne, Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gees, never thought I would get such a great response and so much to learn in a day!

    Much appreciated.


    As a print designer I needed some quick results to keep me motivated , I watched a lot of training videos but was getting rather bored. So I thought to quickly mock something in photoshop and have a crack at css.

    I am going to play around with what you provided and hopefully put it to good use.


    Thank you!


Bookmarks

Posting Permissions

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