Div width

HTML & CSS
1

I am struggling with div width.

In the coding below, the perfect layout will be, shortCutDiv just takes 200px width, all leftover width will be assigned to bodyMain. But now I have to manually set width to bodyMain.

How to work out, especially in different screen resolution ?

Thanks.


html,body {
                width: 100%;
                height: 100%;
                border: 0;
                padding: 0;              
                margin: 0;
}

<div id="bodyDiv">  		
  		<div id="shortCutDiv" style="margin-right:5px;float:left;display:true;width:200px;height:600px;border-right:1px solid lightgrey;">  			
  			<tiles:insertAttribute  name="shortcutDiv" />
  		</div>
  		<div id="bodyMain" style="float:left;padding-left:5px;height:600px;width:1000px;">  			
  			<div><tiles:insertAttribute name="body" /></div>
  		</div> 
  		<br style="clear:both;height:0px;"/> 		
</div>
2

Remove the float from bodyMain and just put a large left margin on it:

<div id="bodyMain" style="margin-left: 205px">

I assume you are only using inline styles for demo purposes?

Also, display: true; is not valid CSS, so just remove it.

3

thanks, it works. I am not sure it will work in different PC and different screens.

Could you please explain why you “put a large left margin” ? is it a bug ?

I have tried to write a body event to calculate its width, but it is always not accurate, don’t know why.

4

No, no bug; this is a very standard layout method, and is very reliable. bodyMain is essentially full width, so you don’t put any width on it. But putting a left margin that is the width of the floated div gives that floated div room to sit beside bodyMain.