CODEWITHSUNDEEP
csscss-float
Leon van der Veen
Leon van der Veen

Reputation: 1672

3 columns with float left and the same width at full screen

I have a full screen lay-out and what I want is 3 colums with the same width and left floating.

What i have is this:

<div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left;"><p>lipsum</p></div>

One div without float and with width 100% works fine.

Is it not possible to do this with divs? Do I have to use a table for this?

Upvotes: 2

Views: 920

Answers (3)

pinaldesai
pinaldesai

Reputation: 1815

Try this code may be can helpful to you. You can modify style properties as per your need.

<html>
<body style="width:100%; margin:0px;">
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid;width:31.7%;"><p>lipsum</p></div>
</body>
</html>

Thanks.

Upvotes: 0

juankysmith
juankysmith

Reputation: 12458

<div class="row">
    <div class="column1" style="float:left; left:0px; width:33%"></div>
    <div class="column2" style="float:left; left:33%; width:33%"></div>
    <div class="column3" style="float:left; left:66%; width:33%"></div>
</div>

Upvotes: 0

Kyle
Kyle

Reputation: 67204

You need one div with its display set to table wrapped around your ps.

HTML

<div class="table_small">
    <p>lipsum</p>
    <p>lipsum</p>
    <p>lipsum</p>
</div>

CSS:

.table_small
{
    width: 100%;
    display: table;
}

.table_small p
{
    display: table-cell;
    border: 1px dashed #000;
}

The parent element <div class="table_small"> must have a set width for this to work.

Demo for you here.

Upvotes: 3

Related Questions