Forum Moderators: not2easy
As a newbie I'm still getting to grips with concepts like quirks & standards mode, box models and so on, which I think is where my following problem lies.
I have written a simple HTML page in an attempt to produce a 2 column layout (I realise a width of 1000px isn't very practical for lower-res screens but it's just to demo the problem):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style>
.divMain {width: 1000px; border: solid 1px black;}
.divLeft {width: 300px; padding: 20px; float:left; background-color: #e0e0e0;}
.divRight {width: 700px; padding: 20px; float:right; background-color: #c0c0c0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="divMain">
<div class="divLeft">This is the left panel</div>
<div class="divRight">This is the right panel</div>
</div>
</form>
</body>
</html>
What happens is that the two divs don't appear side-by-side, like they are too wide for the containing (1000px) div. From what I can see, the padding is causing the trouble. If I reduce each div's width by 40px (i.e. 2 x padding) then it looks fine. Why does this happen when the padding is only intended to indent what's *inside* the divs?
Can someone shed some light on this and explain why it happens?
Many thanks in advance
Andy
