Two-column news layout

P

Penguinny

Dear all,

I am trying to make a relatively simple layout with two adjustment
columns filled with short news pieces, but there's a catch. I cannot
control the html for these news bits, so I am left with CSS only for
positioning etc. My problem is the following. The most natural way to do
what I want is to use "float: left" (or "float: right") for my news bits
and see them all filling the space. However, there's the catch: if the
news bits are allowed to be significantly different in size, then
sometimes "float: left" would leave unnecessarily large spaces on the
left (or, for "float: right", on the right), see the following simple
example:

<html>
<head>
<style type="text/css">
div { border: solid black 1px; }
#box1 { width: 49%; height: 100px; float: left; }
#box2 { width: 49%; height: 200px; float: left; }
#box3 { width: 49%; height: 300px; float: left; }
</style>
</head>

<body>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>

</body>
</html>

What I really want is to fill in the space under box no. 1. Can I
somehow tell browser to use "float: left or right" (not literally, mind
you :) ), so that the space is filled completely? Are there any other
ways to perform this task that I am not aware of?

Best wishes,
Alex
 
B

Bart van den Burg

Penguinny said:
Dear all,

I am trying to make a relatively simple layout with two adjustment
columns filled with short news pieces, but there's a catch. I cannot
control the html for these news bits, so I am left with CSS only for
positioning etc. My problem is the following. The most natural way to do
what I want is to use "float: left" (or "float: right") for my news bits
and see them all filling the space. However, there's the catch: if the
news bits are allowed to be significantly different in size, then
sometimes "float: left" would leave unnecessarily large spaces on the
left (or, for "float: right", on the right), see the following simple
example:

<html>
<head>
<style type="text/css">
div { border: solid black 1px; }
#box1 { width: 49%; height: 100px; float: left; }
#box2 { width: 49%; height: 200px; float: left; }
#box3 { width: 49%; height: 300px; float: left; }
</style>
</head>

<body>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>

</body>
</html>

What I really want is to fill in the space under box no. 1. Can I
somehow tell browser to use "float: left or right" (not literally, mind
you :) ), so that the space is filled completely? Are there any other
ways to perform this task that I am not aware of?

Best wishes,
Alex
Click to expand...

One way to do it is:

<html>
<head>
<style type="text/css">
#leftcontainerbox,#rightcontainerbox { width: 49%; float: left; }
..box { border: 1px solid black; }
#box1 { width: 100%; height: 100px; }
#box2 { width: 100%; height: 200px; }
#box3 { width: 100%; height: 300px; }
</style>
</head>

<body>

<div id="leftcontainerbox">
<div id="box1" class="box">1</div>
<div id="box3" class="box">3</div>
</div>
<div id="rightcontainerbox">
<div id="box2" class="box">2</div>
</div>

</body>
</html>


I hope this is what you need :)
 
P

Penguinny

Bart said:
One way to do it is:

<html>
<head>
<style type="text/css">
#leftcontainerbox,#rightcontainerbox { width: 49%; float: left; }
.box { border: 1px solid black; }
#box1 { width: 100%; height: 100px; }
#box2 { width: 100%; height: 200px; }
#box3 { width: 100%; height: 300px; }
</style>
</head>

<body>

<div id="leftcontainerbox">
<div id="box1" class="box">1</div>
<div id="box3" class="box">3</div>
</div>
<div id="rightcontainerbox">
<div id="box2" class="box">2</div>
</div>

</body>
</html>


I hope this is what you need :)
Click to expand...

You are cheating :) The challange is that I cannot really control the
html (I'm working on a css overrides for a somewhere else generated
blog). Otherwise, I would certainly do it your way, but I need a
technique to fill the containers up automatically (with no html
involved). If there is a way to do it, it would be an amazing hack. I am
trying to play with collapsing spaces at the moment, but no luck so far.
Was just hoping someone had a solution already.

Alex
 
U

Uncle Pirate

Penguinny said:
You are cheating :) The challange is that I cannot really control the
html (I'm working on a css overrides for a somewhere else generated
blog). Otherwise, I would certainly do it your way, but I need a
technique to fill the containers up automatically (with no html
involved). If there is a way to do it, it would be an amazing hack. I am
trying to play with collapsing spaces at the moment, but no luck so far.
Was just hoping someone had a solution already.
Click to expand...

This really belongs over in comp.infosystems.www.authoring.html or
some other css group.

With that said, for a try, set the container elements to 50% or slightly
less and let them all float left. They should then fill the available
width with two columns. Don't forget to count border width and margin
in that 50%.

Disclaimer: Posted without trying. Not guaranteed to work.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
 
U

Uncle Pirate

P

Penguinny

This really belongs over in comp.infosystems.www.authoring.html or some
other css group.

With that said, for a try, set the container elements to 50% or slightly
less and let them all float left. They should then fill the available
width with two columns. Don't forget to count border width and margin
in that 50%.

Disclaimer: Posted without trying. Not guaranteed to work.
Click to expand...

Thanks for a direction. I'll try my luck there as well.

As for your idea, it won't work for the reason described in my first
posting: if you get box on your right significantly bigger than box on
your left, "float:left" produces quite ugly chunk of space.

Thanks again. I'll ask over there.

Best wishes,
Alex
 
R

Richard

Dear all,
Click to expand...
I am trying to make a relatively simple layout with two adjustment
columns filled with short news pieces, but there's a catch. I cannot
control the html for these news bits, so I am left with CSS only for
positioning etc. My problem is the following. The most natural way to
do
what I want is to use "float: left" (or "float: right") for my news
bits
and see them all filling the space. However, there's the catch: if the
news bits are allowed to be significantly different in size, then
sometimes "float: left" would leave unnecessarily large spaces on the
left (or, for "float: right", on the right), see the following simple
example:
Click to expand...
<html>
<head>
<style type="text/css">
div { border: solid black 1px; }
#box1 { width: 49%; height: 100px; float: left; }
#box2 { width: 49%; height: 200px; float: left; }
#box3 { width: 49%; height: 300px; float: left; }
</style>
</head>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>

What I really want is to fill in the space under box no. 1. Can I
somehow tell browser to use "float: left or right" (not literally, mind
you :) ), so that the space is filled completely? Are there any other
ways to perform this task that I am not aware of?
Click to expand...
Best wishes,
Alex
Click to expand...

If you want all 3 columns to appear on the same page with no horizontal
scroll, you cannot have all 3 set to 49%.
50*3=150.
So you need to use no more than 33.3% for each.
In reality, 32% or even 30% for borders and margins.

To keep your boxes from falling apart in a resize, use a container box for
all.
<div id="contain">
<div>box 1</div>
<div>box 2</div>
</div>
 
P

Penguinny

Richard said:
If you want all 3 columns to appear on the same page with no horizontal
scroll, you cannot have all 3 set to 49%.
50*3=150.
So you need to use no more than 33.3% for each.
In reality, 32% or even 30% for borders and margins.

To keep your boxes from falling apart in a resize, use a container box for
all.
<div id="contain">
<div>box 1</div>
<div>box 2</div>
</div>
Click to expand...

Richard, did you read my post? I specifically said that I want _two_
columns, packed tightly with boxes, like in example. My problem is with
vertical spaces, not horizntal.

Best wishes,
Alex
 
G

ghoulx

Richard said:
If you want all 3 columns to appear on the same page with no horizontal
scroll, you cannot have all 3 set to 49%.
50*3=150.
So you need to use no more than 33.3% for each.
In reality, 32% or even 30% for borders and margins.

To keep your boxes from falling apart in a resize, use a container box for
all.
<div id="contain">
<div>box 1</div>
<div>box 2</div>
</div>
Click to expand...



http://www.lart.com/rtsfaq/
 

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 with Visual Lightbox: Scripts 2
Setup a portion of html page as scrollable? 25
Dropdown menu in a fixed navbar 2
Help with my responsive home page 2
Having difficulty with the layout of these images / video for this web page 2
Positioning CSS components 1
Need help , Having problem with Drag n Drop... 1
Stuck with html and css 25

Members online

No members online now.
Total: 281 (members: 0, guests: 281)
Robots: 503

Forum statistics

Threads
474,430
Messages
2,571,676
Members
48,796
Latest member
Greg L.

Latest Threads

Top