make a div use maximum width

G

Gernot Frisch

Hi,
I want the green piece ("Please be wide") to fill the whole space
between the red and the blue thingy. How can I do that?

Thank you in advice,
-Gernot

PS: My code is as minimal as possible, I know I should use strict-html
and stuff.


<html>
<body>
<div style="width:50%;">
<!-- left item -->
<div style="float:left; width:16px; background-color:Red;"></div>

<!-- center text -->
<div style="float:left; background-color:green;">Please be wide</div>
<!-- right item -->
<div style="float:right; width:16px; background-color:blue;"></div>
</div>
</body>
</html>
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Tue, 21 Aug 2007 08:49:07 GMT
Gernot Frisch scribed:
Hi,
I want the green piece ("Please be wide") to fill the whole space
between the red and the blue thingy. How can I do that?

Thank you in advice,
-Gernot

PS: My code is as minimal as possible, I know I should use strict-html
and stuff.


<html>
<body>
<div style="width:50%;">
<!-- left item -->
<div style="float:left; width:16px; background-color:Red;"></div>

<!-- center text -->
<div style="float:left; background-color:green;">Please be wide</div>
<!-- right item -->
<div style="float:right; width:16px; background-color:blue;"></div>
</div>
</body>
</html>
Click to expand...

Put a &nbsp; after <div style="width:50%;">
 
M

Martin Jay

I want the green piece ("Please be wide") to fill the whole space
between the red and the blue thingy. How can I do that?
Click to expand...

This is because the centre DIV isn't given a width.
<html>
<body>
<div style="width:50%;">
<!-- left item -->
<div style="float:left; width:16px; background-color:Red;"></div>

<!-- center text -->
<div style="float:left; background-color:green;">Please be wide</div>
<!-- right item -->
<div style="float:right; width:16px; background-color:blue;"></div>
</div>
</body>
</html>
Click to expand...

One solution may be to wrap the left, centre and right DIVs into an
additional DIV, and give that a green background colour:

<html>
<body>
<div style="width:50%;">

<div style="background-color: green; float: left;">

<!-- left item -->
<div style="float:left; width:16px; background-color:Red;"></div>
<!-- center text -->
<div style="float:left; background-color:green;">Please be wide</div>
<!-- right item -->
<div style="float:right; width:16px; background-color:blue;"></div>
</div>

</div>

</body>
</html>
 
G

Gernot Frisch

One solution may be to wrap the left, centre and right DIVs into an
additional DIV, and give that a green background colour:
Click to expand...

Perfect! That's the way to do it.
 

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

How to make a div select work? 5
How can I get my menu inside of a menu to function properly? 1
Help with code 0
Help with Visual Lightbox: Scripts 2
Div width 4
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
How to have two html audio players on one page? 0

Members online

Total: 36 (members: 4, guests: 32)
Robots: 426

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,050
Latest member
AngelS122

Latest Threads

Top