CSS - HTML - 2 float columns

Question

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:

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:

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!

Note that you're missing the closing tag for your first div — Sir Crispalot
– Sir Crispalot, Commented Feb 1, 2012 at 16:20

David Allen · Accepted Answer · 2012-02-01 16:39:55Z

5

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

answered Feb 1, 2012 at 16:39

David Allen

1,1732 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Skylineman Over a year ago

Thanks. :) didn't think on this.. :D

David Allen Over a year ago

No problem. Hope its does what you need. Remember to check in other browsers as I only checked in Chrome and IE9

magicalex Over a year ago

Good answer. Only problem is if the size of the 'test' div changes. Adding a margin-right: 20px to the 'test' div instead and adding overflow: auto to the second inner div does the trick. Jsfiddle here.

David Allen Over a year ago

True - I also found that max-width will also do what he needs aswell. but I'm not sure how the older IE browser support this

FelipeAls · Accepted Answer · 2012-02-01 16:40:23Z

2

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)

edited Feb 1, 2012 at 16:40

answered Feb 1, 2012 at 16:31

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

1 Comment

FelipeAls Over a year ago

Without code, I can only tell you that whether children aren't displayed in table-cell mode or parent isn't displayed as a table. Or that your "cells" don't have the same parent (not ancestor, parent).

Andrew · Accepted Answer · 2012-02-01 16:26:47Z

1

<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.

answered Feb 1, 2012 at 16:26

Andrew

6,44419 gold badges62 silver badges94 bronze badges

3 Comments

Alexander Pavlov Over a year ago

I believe WIDTHs were not allowed on the inner DIVs, no?

Skylineman Over a year ago

Just forgot to copy, and I'm not allowed to use width!

Andrew Over a year ago

@Skylineman I tried it and it looks like your Photoshop image

Jannis M · Accepted Answer · 2012-02-01 16:35:35Z

0

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

edited Feb 1, 2012 at 16:35

answered Feb 1, 2012 at 16:30

Jannis M

7351 gold badge4 silver badges15 bronze badges

1 Comment

Residuum Over a year ago

... and do not float the second div, if that is what you mean.

Yoshi · Accepted Answer · 2012-02-01 16:44:38Z

0

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/

edited Feb 1, 2012 at 16:44

answered Feb 1, 2012 at 16:30

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Comments

Guilherme · Accepted Answer · 2012-02-01 16:56:53Z

0

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>

answered Feb 1, 2012 at 16:56

Guilherme

1,99022 silver badges23 bronze badges

Collectives™ on Stack Overflow

CSS - HTML - 2 float columns

6 Answers 6

4 Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related