4

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!

2
  • Note that you're missing the closing tag for your first div Feb 1, 2012 at 16:20
  • #1 - it's not missing, just forgot to copy. #2 - I can't.
    – Skylineman
    Feb 1, 2012 at 16:29

6 Answers 6

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

4
  • Thanks. :) didn't think on this.. :D
    – Skylineman
    Feb 1, 2012 at 16:47
  • No problem. Hope its does what you need. Remember to check in other browsers as I only checked in Chrome and IE9 Feb 1, 2012 at 16:55
  • 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.
    – magicalex
    Feb 1, 2012 at 16:57
  • 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 Feb 1, 2012 at 17:03
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)

1
  • 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).
    – FelipeAls
    Feb 1, 2012 at 17:45
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.

3
  • I believe WIDTHs were not allowed on the inner DIVs, no? Feb 1, 2012 at 16:29
  • Just forgot to copy, and I'm not allowed to use width!
    – Skylineman
    Feb 1, 2012 at 16:31
  • @Skylineman I tried it and it looks like your Photoshop image
    – Andrew
    Feb 1, 2012 at 16:32
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

1
  • 1
    ... and do not float the second div, if that is what you mean.
    – Residuum
    Feb 1, 2012 at 16:34
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/

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.