0

I am new to CSS and am trying to figure out how to get something similiar to a 2 column layout. Right now each block is displaying in a normal flow on the page (aka 1 block per row. But I need there to be 2 blocks per row. I don't want to use a table so what are my options for displaying 2 blocks her row instead of 1 block per row.

When I use absolute positioning, they all are on top of each other. Should I not be using any positioning?

.block { 
    padding-top: 8px; 
    padding-bottom:10px; 
    padding-left:5px; 
    padding-right:5px;  
    width:50%; 
    display:block; 
    border:solid 1px;
}
musiclvr
  • 1
  • 1
  • 2
  • You could try: `display: inline-block;` [property](https://developer.mozilla.org/en-US/docs/Web/CSS/display). – emmanuel Oct 14 '14 at 16:56
  • Just tried that and they are still displaying vertically one after the other. I want them to display vertically, but I need there to be 2 blocks per row (instead of only 1 as that makes the page too long). – musiclvr Oct 14 '14 at 17:01
  • Please try to add `float: left;`. A code snippet with your current code and a screenshot what you want to achieve would be much helpful. – emmanuel Oct 14 '14 at 17:03
  • With `inline-block` you need to account for whitespace....with floats you should be Ok as long as you use `box-sizing` correctly - http://learnlayout.com/ – Paulie_D Oct 14 '14 at 17:04

2 Answers2

0

Try using float:left; Also you might need to decrease your width from 50% because you are also giving padding to you blocks. So padding also takes up the total space of your parent div in which these blocks are included. Either set the padding, border and margin to 0 or decrease the width of the blocks (.block) .

Vaibhav Goyal
  • 1
  • 1
  • 3
0

Short Answer

You should be using display:inline-block; if you want them to be in the same line and be able to control their sizes, display:block; elements take up the whole width, and will push other elements down below themselves.

Example Images/Answer/Code from Stackoverflow:

Differences between inline, block, and inline-block

Complete explanation:

W3C Visual Formatting Model

Community
  • 1
  • 1
Event_Horizon
  • 708
  • 1
  • 11
  • 30
  • Here is my HTML: `

    Title

    Text......

    Title

    Text......

    ` and so on.... CSS: `.block {display:inline-block; float:left; padding-top: 8px; padding-bottom:10px; padding-left:5px; padding-right:5px; width:45%; border:dotted 1px; }` Current layout: [link](http://tinypic.com/r/zx5zkg/8) Layout I'm trying to achieve: [link](http://tinypic.com/r/j5jnsl/8)     – musiclvr Oct 14 '14 at 18:17