Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > placing one div to the left of another

Reply
Thread Tools

placing one div to the left of another

 
 
Scott
Guest
Posts: n/a
 
      02-26-2010
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.
 
Reply With Quote
 
 
 
 
Gus Richter
Guest
Posts: n/a
 
      02-27-2010
On 2/26/2010 6:50 PM, Scott wrote:
> 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 {}

--
Gus

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-27-2010
In article
<(E-Mail Removed)
>,

Scott <(E-Mail Removed)> wrote:

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

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-27-2010
In article <hm9on2$39j$(E-Mail Removed)-september.org>,
Gus Richter <(E-Mail Removed)> wrote:

> On 2/26/2010 6:50 PM, Scott wrote:
> > 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.

--
dorayme
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      02-27-2010
On 2/26/2010 7:31 PM, dorayme wrote:
> In article<hm9on2$39j$(E-Mail Removed)-september.org>,
> Gus Richter<(E-Mail Removed)> wrote:
>
>> On 2/26/2010 6:50 PM, Scott wrote:
>>> 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.

--
Gus


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How does .rjust() work and why it places characters relative toprevious one, not to first character - placed most to left - or to left sideof screen? crispy Python 6 08-20-2012 12:45 PM
placing two images one in front and one behind Nospam HTML 6 03-23-2007 12:47 AM
<H1> causing a gap between head div and left column / content div Kate HTML 4 02-19-2005 10:22 PM
Re: <H1> causing a gap between head div and left column / content div Kate HTML 1 02-19-2005 06:20 PM
can't reset the left value of a DIV using document.getElementById(thisDiv).style.left = howFarLeft; lawrence Javascript 13 09-04-2004 09:07 PM



Advertisments