Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > noob trouble with css

Reply
Thread Tools

noob trouble with css

 
 
sdsd
Guest
Posts: n/a
 
      05-11-2008
Can anyone please let me know how I can make the "main_left" div
expand to the remaining space after "main_right" occupies the right
220px. I have tried different combinations but the "main_left" drops
down below "main_right".

Many thanks in advance.
.................................................. ....
<head>
<style type="text/css">

/* Main Layout */
#main {
width: 95%;
border: 2px solid #CCC;
margin: 10px auto 0;
padding: 10px;
}
#main_left {width: 545px; border: 1px solid #ccc;}
#main_right {width: 220px; border: 1px solid #ccc;}

/* Floats */
..left {float: left;}
..right {float: right;}

</style>
</head>
<body>

<div id="main">
<div class="left" id="main_left">

Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus.
Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam

</div>
<div class="right" id="main_right">

efgh

</div>
<div class="clearer">&nbsp;</div>
</div>


</body>
</html>
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      05-11-2008
In article
<(E-Mail Removed)>,
sdsd <(E-Mail Removed)> wrote:

> #main {
> width: 95%;
> border: 2px solid #CCC;
> margin: 10px auto 0;
> padding: 10px;
> }
> #main_left {width: 545px; border: 1px solid #ccc;}
> #main_right {width: 220px; border: 1px solid #ccc;}
>
> /* Floats */
> .left {float: left;}
> .right {float: right;}


> <div id="main">
> <div class="left" id="main_left">
> Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus.
> Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam
> </div>
> <div class="right" id="main_right">efgh</div>
> <div class="clearer">&nbsp;</div>
> </div>


You cannot expect a percentage specified main (in relation to - most
likely - browser viewport width) to relate well to the px widthed
"internal" divs. If you use a consistent unit, you will get a better
result. Best is generally % or em. But here is in px:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">

/* Main Layout */
#main {
width: 800px;
border: 2px solid #CCC;
margin: 10px auto 0;
padding: 10px;
overflow: hidden;
}
#main_left {width: 545px; border: 1px solid #ccc;}
#main_right {width: 220px; border: 1px solid #ccc;}

/* Floats */
..left {float: left;}
..right {float: right;}
</style>
<title></title>
</head>
<body>
<div id="main">
<div class="left" id="main_left">
Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam
</div>
<div class="right" id="main_right">
efgh
</div>
<div class="clearer">
&nbsp;
</div>
</div>
</body>
</html>

I add overflow, in case you want the main to "cover" the floats. You can
also use a clearing div to achieve this effect (and which works in IE6
unlike overflow).

--
dorayme
 
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
Here a noob, there a noob.... JimDoire MCSE 0 04-10-2008 07:23 PM
Another noob in trouble! Help me out if you like! the_transcriber@yahoo.com Java 19 10-11-2007 06:43 AM
aligning DIV in css - Noob Question. jobs HTML 5 05-26-2007 08:18 AM
CSS noob question Jo9100 HTML 1 04-16-2007 04:05 AM
Noob has trouble with io/wait on Windows Larry Edelstein Ruby 1 02-23-2006 10:23 AM



Advertisments