CODEWITHSUNDEEP
csshtmlcss-float
Skylineman
Skylineman

Reputation: 576

CSS - HTML - 2 float columns

I've run into a problem.

My code now:

<div style="width: 500px; margin: auto; border: 1px solid black;">
   <div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
   <div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
   <div style="clear: both;"></div>
</div>

And it seems like this now:

IMG1

When the word in the second div is as short as can be placed after the first div, it's in one row, like this:

IMG2

My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!

Like this (PhotoShop):

enter image description here

Thanks for the help in advance!

Upvotes: 4

Views: 337

Answers (6)

Guilherme
Guilherme

Reputation: 1990

Is like a table cell, try this

<div style="width: 500px; margin: auto; border: 1px solid black;">  
    <div style="float: left;">
        <div style="border: 1px solid black;"><b><u>TEST</u></b></div>
    </div>  

    <div style="display:table-cell;">
        <div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A  </div>
    </div>

    <br style="clear: both;">
</div>

Upvotes: 0

Yoshi
Yoshi

Reputation: 54649

Try:

<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
   <div style="float: left; margin-right: 20px; border: 1px solid black;">
     <b><u>TEST</u></b>
   </div>
   <div style="overflow: hidden;">
     <div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
   </div>
</div>

http://jsfiddle.net/ZmRY2/5/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22161

No width allowed ? OK here is a try:

AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.

A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)

#main {
  display: table;
  width: 500px;
  margin: auto;
  border: 1px solid blue;
}

#main > div {
  display: table-cell;
  border: 1px dashed black;
  padding: 1em;
}


#main > div + div {
  padding-left: 20px;
}

EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)

Upvotes: 2

David Allen
David Allen

Reputation: 1163

Is this what you looking for

I removed the float:left from the second inner div and increased the margin.

<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A     A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A       </div>
<div style="clear: both;"></div></div>

Hope this helps

Upvotes: 5

Jannis M
Jannis M

Reputation: 745

Float the first box left and give it an fix width. Then give the right div a margin-left bigger than the left div's width! ... and do not float the second div

Upvotes: 0

Andrew
Andrew

Reputation: 6394

<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>

This is close to what you wanted. I just set the width for the inner div's. Also, you forgot to close the first div tag.

Upvotes: 1

Related Questions