HTML & CSS
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 ?
<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 id="bodyMain" style="float:left;padding-left:5px;height:600px;width:1000px;">
<div><tiles:insertAttribute name="body" /></div>
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.
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.
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.