Forum Moderators: not2easy
I have a few images that i want to place in the header section. It works perfectly when they are in the right hand column and are stacked on top of each other, but when I put the same code into the header they sit along side each other. I'm not sure how to get them to stack in line with the right hand column. I hope this is enough code.
THANKS
</head>
<body>
<div id="header"><h1>Example Services</h1> <div id="tele">
<img src="img/Telephone.jpg" alt="alt text here" title="title text here" />
</div>
<div id="email1">
<a href="http://www.example.com/Contact-Us.html"><img src= "img/email.jpg" alt="email isabels" title="click to email isabels" /></a>
</div>
<div id="upload">
<a href="http://www.example.com/"><img src="img/upload_file.jpg" alt="Upload folder" title="upload folder"/></a>
</div></div>
<div id="wrapper">
<div id="sidebar">
<div id="navcontainer">CSS
#tele {
width : 160px;
margin :5px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#email1 {
width : 160px;
margin :0px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#upload {
width : 160px;
margin :0px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#star {
width : 160px;
margin :15px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#header {
background-image: url(img/Typewriters.jpg);
background-repeat: no-repeat;background-position: center;
height : 143px;
}
[edited by: encyclo at 6:39 pm (utc) on Aug. 6, 2009]
[edit reason] obfiscated specifics, see posting guidelines [/edit]
It looks like the reason they are sitting side-by-side is because you've got them floating right. ASsuming the header is wide enough for all of them to sit side-by-side then floating right will make them do that.
The reasons the same right float won't be aligning them side-by-side in the right bar, (at a guess without seeing rightbar css) is because it isn't wide enough to allow them to do so ... therefor you see them as stacked.
Float right will sit items side by side if there is room to do so. Which would explain what you are seeing.
I've only been dabbling in CSS for a month or so now, so this may be wrong, but it sounds familiar to an issue I had while learning.
