Hi All ...
Hoping a CSS guru can help me out here. {Paul?? anyone? }
I have 4 images: leftheader, middle, and right with a logo.
Since div's are block level elements, I'm not able to figure out the right formula for getting everything all in one line, so-to-speak. ie: rather than going on one line to form the header, they stack.
Style:
body {
margin: 30px;
font: 12px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 1.4em;
color: #ececec;
background: #B7BCC3 url(images/bck.jpg) repeat-x;
}
#left {
height: 77;
margin-bottom: 0;
position: relative;
background: transparent url(images/header-left.png) no-repeat left top;
}
#middle {
height: 77;
margin-bottom: 0;
position: relative;
background: transparent url(images/header-middle.png) repeat-x center top;
}
#right {
height: 77;
margin-bottom: 0;
position: relative;
background: transparent url(images/header-right.png) no-repeat right top;
}
#logo {
float: left;
margin-left: 8px;
width: 395px;
height: 77px;
background: transparent url(images/logo.png) no-repeat top left;
}
HTML page:
<div id="container">
<div id="left"> </div>
<div id="middle"> <div id="logo"> </div> </div>
<div id="right"> </div>
</div>
Can someone tell me the right way to phrase the style sheet so this works correctly? Any Help would be appreciated tremendously.
TIA!!