www.webdeveloper.com
Results 1 to 9 of 9

Thread: Three divīs in a row

  1. #1
    Join Date
    Mar 2014
    Posts
    7

    Three divīs in a row

    Hey guys!

    a got another little question and need a clue.

    when I place some divīs in a row I use float and width for the divīs, like that one here:

    Code:
         }
         #master {
         	 width: 940px;
         	 margin: auto;
         }
         #one, #two, #three {
         	 width: 300px;
         	 height: 375px;
         	 float: left;
         }
         #one {
         	 background: blue;
         	 margin-left: 10px;
         	 margin-right: 10px;
         }
         #two {
         	 background: green;
    
         }
         #three {
         	 background: yellow;
         	 margin-left: 10px;
         	 margin-right: 10px;
         }
    but how can i place three divs in a row, with automatically width based on the viewport?

    hope u can understand it better with the following pic

    http://clip2net.com/s/6XmLbW

    <nick>

  2. #2
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    #one, #two, #three {
    width: 32%;
    height: 375px;
    float: left;
    }

    That would total 96%, leaving room for the margin. Percent scales no matter the viewport. I would also change the height to em, as that is based on the font size which scales with the viewport. Let me know if this works for you.

  3. #3
    Join Date
    Mar 2014
    Posts
    7
    Hey winthropite,

    Thanks, that works fine! take a look if u like

    http://cdpn.io/pawqJ

    <nick>

  4. #4
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    Awesome. I was thinking about the height and I recommend changing it to

    min-height: 20em;

    You'll have to play with the number of ems to start, but what this does is sets a minimum baseline height for the divs. If you set a fixed height and the content is too big for it, that's a problem. But with min-height it doesn't set a maximum or fixed height, so the divs can dynamically grow with any content.

    One last little change I would recommend is in #master, change margin to "0, auto" (without quotes). That way you're not setting the top and bottom margins to auto; instead, they'll be set to 0.

    Glad I could help!

  5. #5
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    I always have more to add, haha! If you're going to have content beneath those divs, after div#three closes, add an empty div as follows:

    <div class="clearfix"></div>

    and in the CSS, add

    .clearfix {
    clear: both;
    }

    This will clear the floats for you.

  6. #6
    Join Date
    Mar 2014
    Posts
    7
    Hey,

    yea, I played the last hour a bit with the em size and min-width. But I think a minwidth doesn't made sence this time, cuz I think I should Media Queries? I mean when I set a min-width it looks at least like this:

    http://clip2net.com/s/6XBAvv

    But when I use Media Queries, as example, for a viewport with min-width 900px @media only screen and (min-width: 900px) I can set a new size for the divīs and so on. 900px up tp XXX px is no prob, also i could add more steps for tablets, or phones...

    or iīm wrong?

    <nick>

  7. #7
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    I don't know if I'd do min-width... I was just talking about min-height. But media queries are good for setting some baselines.

  8. #8
    Join Date
    Mar 2014
    Posts
    7
    ohh..sry, my fail ...yea a min-height sounds logically.

    Big thanks for youre help!

  9. #9
    Join Date
    Mar 2014
    Posts
    24
    Div stands for division tag.It used for divide the web page into multiple function.you can use the three columns in div tag in same time...........

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles