In the HTML below, the layout works when the actionBar class has a float (left or right only), however, if I remove it, the enclosing div stretches across the whole page and messes up the layout. I'd really like this "structure" to be centered on my page. Currently with the "float" specified in the actionBar class, it's either left aligned or right aligned. Can someone explain to me why it does that (the "gets-all-messed-up-without-the-float" part)?
Of course, being a relative HTML rookie, if you have some other brilliant way of achieving the same layout, that's always welcome. For now, I'm just looking for an explanation so I can try and find a solution.
Note: The ugly greens and blues and reds are just for illustration. The real HTML uses images to give a rounded corner type effect to what is essentially a collection of buttons.
Thanks!
<html>
<head>
<style>
.actionButtonLeft {
padding: 0; margin: 0; margin-right: 1;
float : left;
width : 8px; height : 26px;
background-color: green;
}
.actionButton {
padding: 0; margin: 0; margin-right: 1;
background-color : blue; color : #ffffff ;
height : 26px;
float : left;
}
.actionButtonRight {
padding: 0; margin: 0;
float : left;
width : 8px; height : 26px;
background-color: green;
}
.actionBar {
float:left; /* or float: right; -- doesn't work with no float */
background-color:#112554;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="actionBar">
<div class="actionButtonLeft" ></div>
<input type="button" value="OK" name="OK" id="okButton" class="actionButton"
style="WIDTH:100px; " onclick="doSomething();">
<input type="button" value="Cancel" name="Cancel" id="cancelButton"
class="actionButton"
style="WIDTH: 100px" onclick="cancelThis();">
<input type="button" value="Help" name="Help" id="helpButton"
class="actionButton"
style="WIDTH: 100px" onclick="helpMe();">
<div class="actionButtonRight"></div>
<div style="width:0px;clear:right;"></div></div>
</body>
</html>