Position 2 DIVs on Single Line

V

vunet

I want to position 2 divs correctly. First one is the content and
second one is the right side bar of fixed size.
I want the content to have no fixed width but right side bar would be
200px. If no right side bar div tag shown, the first div would fully
expand.
Please recommend based on my bad example below or suggest something
better if possible.
The example below has a fixed width for div 2, but I need full width
and div 2 would fit in on right side moving div 1 content to the left.
Thanks a lot


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
div#one {
float: left;
width:300px;
margin: 0px;
background-color: red;
}
div#two {
float: right;
width: 200px;
padding: 5px;
margin: 0px;
background-color: silver;
}

-->
</style>
</head>

<body>
<div id="one">
Port side text...
<p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute
irure dolor ut aliquip ex ea commodo consequat. </p>
</div>

<div id="two">
Second column text...
<p>Velit esse cillum dolore duis aute consectetur adipisicing
elit. Quis nostrud sed tempor est laborum. </p>
<p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
</div>
</body>
</html>
 
N

Neredbojias

I want to position 2 divs correctly. First one is the content and
second one is the right side bar of fixed size.
I want the content to have no fixed width but right side bar would be
200px. If no right side bar div tag shown, the first div would fully
expand.
Please recommend based on my bad example below or suggest something
better if possible.
The example below has a fixed width for div 2, but I need full width
and div 2 would fit in on right side moving div 1 content to the left.
Thanks a lot


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
div#one {
float: left;
width:300px;
margin: 0px;
background-color: red;
}
div#two {
float: right;
width: 200px;
padding: 5px;
margin: 0px;
background-color: silver;
}

-->
</style>
</head>

body>
div id="one">
Port side text...
<p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute
irure dolor ut aliquip ex ea commodo consequat. </p>
</div>

div id="two">
Second column text...
p>Velit esse cillum dolore duis aute consectetur adipisicing
elit. Quis nostrud sed tempor est laborum. /p>
p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
fugiat nulla pariatur. Ut labore et dolore magna aliqua. /p>
/div>
/body>
/html>
Click to expand...

Well, exactly what don't you like about the results of your example? Do
you want the right content to clear a whole column on the right or what?
 
D

dorayme

vunet said:
I want to position 2 divs correctly. First one is the content and
second one is the right side bar of fixed size.
I want the content to have no fixed width but right side bar would be
200px. If no right side bar div tag shown, the first div would fully
expand.
Click to expand...

I assume the difficulty you are having is that you are not wanting to
specify a right margin for the content div. In a table, in theory, it is
easy, you just have a 2 col table, give it a width of 100% and give the
2nd col a width of 200px.

<style type="text/css" media="screen">
body {margin: 0;}
table {border-collapse: collapse; width: 100%;}
td {color: #000; background: red;}
td#two {color: #000; background: silver; width: 200px;}
</style>
</head>
<body>
<table>
<tr><td>Content</td>
<td id="two">Right side</td></tr>
</table>

Now if there is no second table cell, the first will simply go the whole
width, notwithstanding the provision for a second in the CSS.

Of course, it is easy to achieve a 200px right side-bar with a right
float and a content that fills the left to the left by simply floating
the 200px wide div to the right and not floating the content div at all
(you are unlikely to want it to shrink to fit its own content, it might
never make it to the left edge of the right div!). Unfortunately, one of
the best ways to achieve this is to give the content div a right margin
in which the right div float sits:

<style type="text/css">
body {margin: 0;}
div#one {margin-right:200px;color:#000;background: red;}
div#two {float: right;width:200px;color:#000;background:silver}
</style>
</head>
<body>
<div id="two">Left side</div>
<div id="one">Content</div>
</body>

But you are unlikely to want this for the situation where there is no
right side panel. If you leave it as above but have no div#two, the
content div will still keep the margin.

Not sure why you would not simply adjust the CSS and margin etc to suit
the page and solve the problem, but I guess you have your reason, a
dynamic website, content management site?

There are other things to be tried but I will stop here.
 
G

Gus Richter

vunet said:
I want to position 2 divs correctly. First one is the content and
second one is the right side bar of fixed size.
I want the content to have no fixed width but right side bar would be
200px. If no right side bar div tag shown, the first div would fully
expand.
Please recommend based on my bad example below or suggest something
better if possible.
The example below has a fixed width for div 2, but I need full width
and div 2 would fit in on right side moving div 1 content to the left.
Thanks a lot
Click to expand...

To continue with what dorayme was saying, I've modified your example
with changes which you should note in detail. Also read explanation
notes in the example.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset="iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#one {
margin: 0 210px 0 0;
background-color: red;
}
div#two {
float: right;
width: 200px;
padding: 5px;
margin: 0;
background-color: silver;
}
</style>
</head>
<body>
<div id="two">
Second column text...
<p>Velit esse cillum dolore duis aute consectetur adipisicing
elit. Quis nostrud sed tempor est laborum. </p>
<p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
</div>
<div id="one">
Port side text...
<p>The second column (div#two) is floated right and must appear first
in the markup/source. The first column (div#one) is not floated, but is
permitted to automatically flow to the left of the second column. The
second column has a fixed width declared, but the first column, with no
width declared, will use whatever width is remaining.</p>
<p>The right margin value of 210px applied to the first column will
prevent any extended text from wrapping around the second column.</p>
<p>If the first column is shorter than the second column and a
subsequent element should not be beside the second column but below it,
then the subsequent element must be cleared with a {clear:right;}.</p>
<p>If the second column (div#two) is removed, then the first column
(div#one), with its right margin value of 210px removed, will take up
the full viewport width.</p>
<p>Take note of the Doctype Declaration which I have added and which you
should be using.<br>
Also note the changes I made in your meta element, as well as the
removal of the comment tags in your stylesheet.</p>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
</div>
</body>
</html>
 
V

vunet

To continue with what dorayme was saying, I've modified your example
with changes which you should note in detail. Also read explanation
notes in the example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset="iso-8859-1">
<style type="text/css">
body {
        margin: 0;
        padding: 0;}

div#one {
        margin: 0 210px 0 0;
        background-color: red;}

div#two {
        float: right;
        width: 200px;
        padding: 5px;
        margin: 0;
        background-color: silver;}

</style>
</head>
<body>
<div id="two">
     Second column text...
     <p>Velit esse cillum dolore duis aute consectetur adipisicing
elit. Quis nostrud  sed tempor est laborum. </p>
     <p>Sed do eiusmod tempor incididunt sunt in culpa consectetur
adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu
fugiat nulla pariatur. Ut labore et dolore magna aliqua. </p>
</div>
<div id="one">
   Port side text...
   <p>The second column (div#two) is floated right and must appear first
in the markup/source. The first column (div#one) is not floated, but is
permitted to automatically flow to the left of the second column. The
second column has a fixed width declared, but the first column, with no
width declared, will use whatever width is remaining.</p>
<p>The right margin value of 210px applied to the first column will
prevent any extended text from wrapping around the second column.</p>
<p>If the first column is shorter than the second column and a
subsequent element should not be beside the second column but below it,
then the subsequent element must be cleared with a {clear:right;}.</p>
<p>If the second column (div#two) is removed, then the first column
(div#one), with its right margin value of 210px removed, will take up
the full viewport width.</p>
<p>Take note of the Doctype Declaration which I have added and which you
should be using.<br>
Also note the changes I made in your meta element, as well as the
removal of the comment tags in your stylesheet.</p>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
filler<br>
</div>
</body>
</html>
Click to expand...

What a great answer, thanks! Dorayme was very helpful and your example
extended the answer in a way I was looking for.
So my problem was switching of elements order.
Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
just curious what strict DOCTYPE does to the document? How to choose
the best DOCTYPE for, say, modern AJAX applications (aka RIA)?
 
G

Gus Richter

vunet said:
Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
just curious what strict DOCTYPE does to the document? How to choose
the best DOCTYPE for, say, modern AJAX applications (aka RIA)?
Click to expand...

Search for Doctype Switching or Doctype Sniffing and read all about it.

The short answer is that most other Doctype Declarations other than the
one I used or not using one at all, as you did, causes UAs to go into
their Quirks Mode whereby they display as per their historic quirky,
non-conforming way. A Strict one causes rendering in Standards
Conforming way.
 
A

Adrienne Boswell

Removing DOCTYPE adds spacing in IE6. So I'll have to use it but I am
just curious what strict DOCTYPE does to the document? How to choose
the best DOCTYPE for, say, modern AJAX applications (aka RIA)?
Click to expand...

All new pages should use Strict - Transitional is for pages that are, well,
transitioning. It is what the server sends to the browser that is
important here - not what language is being used on the server. This page
[http://hsivonen.iki.fi/doctype/] makes interesting reading.
 

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

Similar Threads

Help needed with code 5
Lately I'm finding a lot of absolute divs 8
CSS Layout Issue in IE6 - Example in Book Fails 1
Grouping messages that have similarities 2
How to position the *tooltip* comment on these buttons? 9
Justify-content not working 1
Opera dynamic opacity: solved 1
repeat-y doesn't work in IE but works fine on other browsers help please 0

Members online

Total: 28 (members: 2, guests: 26)
Robots: 166

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top