Link to home
Create AccountLog in
Avatar of tonelm54
tonelm54

asked on

Width to use available width

Im trying to get my middle div to use all available space remaining. I thought I could just use *, but doesnt seem to use anything:-

<div style="width:100%;">
    <div style="background-image: url(TL.png); width:409px; height: 92px; float: left;"></div>
    <div style="background-image: url(TM.png); width:*; height: 92px; float: left;background-repeat: repeat-x"></div>
    <div style="background-image: url(TR.png); width:409px; height: 92px; float: left;"></div>
</div>

Open in new window


Am I going along the right path here thinking that * uses all available width?

Thank you
Avatar of skullnobrains
skullnobrains

definitely not
* only works for td widths and only in the html code, not in css

if i understand your layout, youd need those properties (assuming you create 3 divs with the proper ids)

#left_div {
  position: absolute;
  width : 200px;
  height: 100%; /* not necessarily useful */
}
#right_div {
  position: absolute;
  right:0; /* position the div on the right hand side of the page */
  width : 200px;
  height: 100%; /* not necessarily useful */
}
#middle-div {
  margin-left:200px;
  margin-right:200px;
}

note that there are many other ways to achieve this in css
The semantics are a little odd, but it works across the board.

The problem with using margins that cover up the left and right columns, is that in some browsers they will block mouse events.

There are probably other ways of achieving this result without making the right column come before the center column semantically.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
            .wrapper{
                width:100%;
                overflow:hidden;
            }
            .left, .contain{
                float:left;
            }
            .contain{
                 overflow:hidden;
            }
            .right{
                float:right;
            }
            .left, .right{
                width:200px;
                background-color: #ccc;
                height:400px;
            }
            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="contain">
                <div class="left">Left</div>
                <div class="center">
                <div class="right">Right</div>
                Di Ionno: Volunteers keep feeding Sandy victims as chaos subsides along N.J. coast
                1 hour ago Mark Di Ionno/Star-Ledger Columnist Mark DiIonno
                </div>
            </div>
        </div>
    </body>
</html>

Open in new window


The problem with using margins that cover up the left and right columns, is that in some browsers they will block mouse events.

yep, i forgot about iemac6 i guess, ;)
put the left and right divs after the main div will correct this bug. my bad

i'm pretty unsure that mixing right and left floats work in all navigators without sticking the right float on the right hand side but below the left one. mine does.
it's not just iemac6. ie7 and 8 do it too.
it's strange byt the most classical layout is a difficult trick to achieve

there is another flow in the above layout :
add content to the main div and it ends up under the left pane if there is more than 400px worth of content. adding height 100% to the panes does not work with floats even if you do the same for the wrapper. can't think of a good workaround. maybe you have one...
this should work without click capture problems :

<style>
#left {
  position: absolute;
  width : 400px;
  background-image: url(TL.png);
}
#right {
  position: absolute;
  right:0; /* position the div on the right hand side of the page */
  width : 400px;
  background-image: url(TR.png);
}
#middle {
  margin-left:400px;
  margin-right:400px;
  background-image: url(TM.png);
}
#left,#right,#middle{
  height:100%;
}
#wrapper{
  height:192px;
  width:100%;
}
</style>

<div id="wrapper">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
    <div id="middle">MIDDLE</div>
</div>

Open in new window


i'm sure a similar workable solution exists with floats
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
yeah, the margins correct the bug i mentioned above.
i'm not sure using floats is usefull at all in this case.

i'd strongly advise you not to mix float and non-float layouts espetially when you want something cross-browser, but that's a matter of choice. i hate spending hours debugging. you should also add an explicit float:none; in your .inner style so you don't accidentally inherit floats in non-compliant browsers.

then i don't really see the point in adding another solution to an existing working solution, when it's not simpler or more portable, or more rich feature-wise.
Here is the ready solution:

<div style="width:100%; display:table;">
    <div style="background-image: url(TL.png); width:409px; height: 92px; display:table-cell;"></div>
    <div style="background-image: url(TM.png); height: 92px; display:table-cell; background-repeat: repeat-x"></div>
    <div style="background-image: url(TR.png); width:409px; height: 92px; display:table-cell;"></div>
</div>

Open in new window


Or just use table:

<table style="width:100%">
	<tr>
		<td style="background-image: url(TL.png); width:109px; height: 92px;></td>
		<td style="background-image: url(TM.png); background-repeat: repeat-x; height: 92px;></td>
		<td style="background-image: url(TR.png); width:109px; height: 92px;></td>
	</tr>
</table>

Open in new window