CODEWITHSUNDEEP
csshtmlcss-float
Ronaldo
Ronaldo

Reputation: 367

2 Side by side DIVs (1line) stretching to right

I'm trying to build the liquid layout shown below in CSS. liquid layout

The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.

I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/ But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.

The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).

Upvotes: 0

Views: 330

Answers (4)

Ronaldo
Ronaldo

Reputation: 367

I acomplished what I want using display table, table row and table cell in my divs.

Take a look. It's exactily what I want.

http://jsfiddle.net/tcWCC/47/embedded/result/

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19539

It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:

div.Evento {
    overflow: hidden;
    margin-top: 10px;
}

div.NomeEvento {
    background: #eee;
    padding-right: 20%; /* the same as the right column width */
}

div.DataEvento {
    float:right;
    background: #ddd;
}

...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:

<div class="Evento">
    <div class="DataEvento">@evento.Data</div>
    <div class="NomeEvento">@evento.Nome</div>
</div>​

Check it: http://jsfiddle.net/J89Hp/

Cheers

Upvotes: 0

effulge
effulge

Reputation: 77

Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.

div.NomeEvento {
    text-align: left;
    float: left;
    width: 75%;
    background-color: #eee;
}

div.DataEvento {
    text-align: left;
    margin-left: 5%;
    width: 20%; 
    float:left;
    background-color: #ccc;
}

Upvotes: 0

test
test

Reputation: 2608

I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/

Upvotes: 2

Related Questions