Float without width?

Forum Moderators: not2easy

Message Too Old, No Replies

Float without width?

Allowing a floated div to scale without setting width

Hindsight

8:33 pm on Dec 29, 2010 (gmt 0)

In the example below, if you remove the second div, the floated div will only be as wide as the "asdf" text contained within. Lets say that the "asdf" text is dynamic, and it could grow or shrink on the server size. I need it all on one line and because of that, I can't hard-set the width property of the first div.

Now lets say I want that second dive to float to the right of its parent div. However, doing this results in the parent div expanding out beyond the "asdf" text going using up 100% of the screen width.

Is there any way to prevent this from happening?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<div style="border: 1px solid black; float: left">
asdfafdasdasdfasfasfasfasfasdfasdfasdfasdfasdfadsfdasfdasdasf
<div style="float: right;">
more text
    </div>
</div>


</body>
</html>

SuzyUK

12:18 pm on Dec 30, 2010 (gmt 0)

Hi Hindsight, and Welcome to WebmasterWorld!

Not quite sure I understand the whole question, as in what width you actually want both parts to be - or take up, seeing as you don't appear to want 100% width..

There are ways, and which could depend on the effect you actually want, i.e. if the text long text in the left box is very long do you want it wrap to take up more than one line, and still have the right box, aligned top, to appear beside it on the right?

I took this line:

I need it all on one line

literally and suggest the code below, you can make the gap between the two boxes bigger by adjusting the margin.

the example below presumes you want nowrap inside the long text left box, or between the two boxes themselves (the right box will not go below the left) - the whole thing contracts only to the width of the two boxes and causes a horizontal scroll if the window is too narrow.

The whole containing div is floated so that it shrinkwraps both boxes if the content in left box is short..

<div style="border: 1px solid black; white-space: nowrap; float:left;">
<span style="display: inline-block; margin-right: 20px;">asdfafdasdasdfa sfasf asfasfasdf asdfasdfasdf asdfadsfd asfdas dasf</span>
<span style="display: inline-block; background: #ff0;">more text</span>
</div>

some points to note about your code sample.. if floating the second box right, it should appear before the first box in order to be on the same line, perhaps that's something to try, wrap each separate area in it's own span or div - spans will work better if using display: inline-block; - then play around with the floats - ooh.. another question are you able to give the right box a definite width?

anyway if this is not the right interpretation of your q. can you show us, with table code perhaps, what effect you're after?

thanks
Suzy

Hindsight

3:08 pm on Dec 30, 2010 (gmt 0)

Thanks for the reply Suzy. Yes, you have it right. Your example accomplishes what I'm after. The same could be done as follows:

<table>
<tr>
<td>asdfafdasdasdfasfasfasfasfasdfasdfasdfasdfasdfadsfdasfdasdasf</td>
<td style="padding-left: 20px">more text</td>
</tr>
</table>

.... but I'm trying to get away from table-based layouts, which is why I'm here. I've been using them for years and am trying to "see the light" and start using CSS the way it's meant to be used. I'm just having a lot of trouble when it comes to layouts and positioning. Part of the problem, I think, is that most of my work is with forms.

Here is an example of something very common for me to do:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
table {
border: 1px solid black;
}
td {
padding-right: 10px;
border: 0;
}

</style>

</head>

<body>

<table>
<tr>
<td colspan="3">Field number 1</td>
</tr>
<tr>
<td colspan="3"><INPUT type="text" name="t1" value="" size="40" maxlength="35">&nbsp;<img src="btn_search.gif" width="47" height="18" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3">Field number 2</td>
</tr>
<tr>
<td colspan="3"><INPUT type="text" name="t2" value="" size="40" maxlength="35">&nbsp;<img src="btn_search.gif" width="47" height="18" alt="" border="0"></td>
</tr>
<tr>
<td>Field 3</td>
<td colspan="2">Field 4</td>
</tr>
<tr>
<td><INPUT type="text" name="t3" value="" size="10" maxlength="35"></td>
<td colspan="2"><INPUT type="text" name="t4" value="" size="30" maxlength="35"></td>
</tr>
<tr>
<td>Field 5</td>
<td>Field 6</td>
<td>Field 7</td>
</tr>
<tr>
<td><INPUT type="text" name="t5" value="" size="10" maxlength="35"></td>
<td><INPUT type="text" name="t6" value="" size="10" maxlength="35"></td>
<td><INPUT type="text" name="t7" value="" size="10" maxlength="35"></td>
</tr>
</table>

</body>
</html>

Everything fits tightly in place, as you can see. No fixed widths and I need to keep it that way. Everything lines up, and shrinks up to be as small as possible.

This leads me to one or two questions... the first being: Should I just stick with tables for the kind of form I just posted the example of, or is CSS-only always the right way? If CSS-only is always the right way, can anyone provide me with an example of the "right" way to lay that form out, without fixed widths? I've been fighting it for hours and am wondering if maybe tables are the way to go for this kind of thing.