placing one div to the left of another

S

Scott

I want a web page with two divs. The first one will be 160 pixels wide
and float to the left. The second will be unlimited width and float
left, alongside the first. Here is some crude ascii art that probably
won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

Code:
..foo {
   float: left;
   width: 160px;
}
..bar {
  float: left;
}
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the
second div. If the second div has enough text to cause a wrap, then
the second div will appear below the first div instead of appearing to
the right of it.
 
G

Gus Richter

I want a web page with two divs. The first one will be 160 pixels wide
and float to the left. The second will be unlimited width and float
left, alongside the first. Here is some crude ascii art that probably
won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

Code:
.foo {
float: left;
width: 160px;
}
.bar {
float: left;
}
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the
second div. If the second div has enough text to cause a wrap, then
the second div will appear below the first div instead of appearing to
the right of it.

Just remove float:left; from .bar {}
 
D

dorayme

<[email protected]
Scott said:
I want a web page with two divs. The first one will be 160 pixels wide
and float to the left. The second will be unlimited width and float
left, alongside the first. Here is some crude ascii art that probably
won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

Code:
.foo {
float: left;
width: 160px;
}
.bar {
float: left;
}
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the
second div. If the second div has enough text to cause a wrap, then
the second div will appear below the first div instead of appearing to
the right of it.

Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Keeping right</title>
<style type="text/css" media="all">
..foo {
float: left;
width: 160px;
}
..bar {margin-left: 160px;}
</style>
</head>
<body>
<div class="foo">
foo text
</div>
<div class="bar">
bar text bar text bar text bar text
</div>
</body>
</html>
 
D

dorayme

Gus Richter said:
I want a web page with two divs. The first one will be 160 pixels wide
and float to the left. The second will be unlimited width and float
left, alongside the first. Here is some crude ascii art that probably
won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

Code:
.foo {
float: left;
width: 160px;
}
.bar {
float: left;
}
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the
second div. If the second div has enough text to cause a wrap, then
the second div will appear below the first div instead of appearing to
the right of it.

Just remove float:left; from .bar {}

Not quite.
 
G

Gus Richter

Gus Richter said:
I want a web page with two divs. The first one will be 160 pixels wide
and float to the left. The second will be unlimited width and float
left, alongside the first. Here is some crude ascii art that probably
won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

Code:
.foo {
float: left;
width: 160px;
}
.bar {
float: left;
}
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the
second div. If the second div has enough text to cause a wrap, then
the second div will appear below the first div instead of appearing to
the right of it.

Just remove float:left; from .bar {}

Not quite.

Right you are. Thank you for the correction. margin-left was missing.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,768
Messages
2,569,575
Members
45,053
Latest member
billing-software

Latest Threads

Top