CODEWITHSUNDEEP
csshtmllayoutmultiple-columns
J2D8T
J2D8T

Reputation: 825

Creating multiple column layout with div's

I wanted to add a multiple column layout to one of my parent div's to display small widgets. I started of with 3 columns left, middle and right.

I tried to get the columns to display next to each other by using:

display: inline-block;
vertical-align: top;

But it didn't work JS Fiddle

I also tried to use:

float: left;

But again no success JS Fiddle

I got it right by using:

display: table-cell

Now my problem is that when using this last method it sets a minimum width after which it would not scale any smaller and it adds a scroll bar to the bottom of the page which I do not want.

I would like to know why the first two methods did not work in my scenario as I have found other answers on SO that shows that the first two methods are possible solutions.

CSS

#left_widget_column {
border: 0px;
margin: 10px 65% 10px 2%;
padding: 0px;
width: 32%;
}

#middle_widget_column {
border: 0px;
margin: 10px 34% 10px 34%;
padding: 0px;
width: 31%;
}

#right_widget_column {
border: 0px;
margin: 10px 2% 10px 65%;
padding: 0px;
width: 32%;
}

HTML

<div id="left_widget_column">
<h2>Widget 1:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>

<div id="middle_widget_column">
<h2>Widget 2:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>

<div id="right_widget_column">
<h2>Widget 3:</h2>
<p>Fusce felis nisl, egestas a dolor sit amet, mollis cursus diam. Nulla malesuada ullamcorper ante. Vestibulum pulvinar, metus a congue eleifend, magna eros mattis lectus, sed vestibulum neque augue vel risus.</p>
</div>

Upvotes: 0

Views: 2608

Answers (3)

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

You should not use 3 id's: 1 class for the layout is enough. You can add id later on to use it in js, for example.

DEMO

.col {
    box-sizing: border-box;
    float: left;
    width: 32%;
    padding: 10px;
    margin-left: 2%;
}
.col:first-child {
    margin-left: 0;
}

Upvotes: 1

D. WONG
D. WONG

Reputation: 59

Have you not thought of using floats instead? Remove the margins.

#left_widget_column {
border: 0px;
padding: 0px;
float: left;
    width: 32%;
}

#middle_widget_column {
border: 0px;
padding: 0px;
width: 32%;
   float: left;
}

#right_widget_column {
border: 0px;
padding: 0px;
width: 32%;
    float: right;
}

See it here LIVE: http://jsfiddle.net/Whysg/3/

Upvotes: 0

Hamed mayahian
Hamed mayahian

Reputation: 2343

you should not using:

margin: 10px 34% 10px 34%;

http://jsfiddle.net/Whysg/2/

when using float:left the next Div location inside previous div so that's not need margin or ...

Upvotes: 1

Related Questions