Forum Moderators: not2easy
I have some problems positioning images with CSS.
1) In one case, there's a big horizontal gap (10px) below it.
.navline img
{
position: relative;
vertical-align: top;
display: block;
}
<div class="navline">
<IMG src="line.jpg" width=672 />
</div>
It should look like this
texttexttexttexttexttext
navlinenavlinenavline
textexttexttexttexttext
but looks more like
texttexttexttexttexttext
navlinenavlinenavline
texttexttexttexttexttext
The texts are placeholders for other div elements.
2) Below 1) starts a two column layout. I'm using the .mainwrap class + background image to achieve columns of same height. Problem here is that I want the right column to have image-text-image-text (below each other). The two images are of the exact same width as the right column, but there seems to be a padding (which is not defined, of course) of a few pxs from the right, meaning that the a few pxs images overlap the content column. I tried float: right; and text-align: right;, and it worked for the uppermost image (it's positioned correctly). However, it didn't work for the second image. No problems with the <p>text</p> at all.
.mainwrap
{
width: 672px;
background: url(bg.jpg) repeat-y;
z-index: 0;
}
.content
{
width: 474px;
padding: 25px;
z-index: 1;
float: left;
}
.sidebar
{
position: relative;
float: right;
width: 148px;
z-index: 1;
display: inline;
}
That's the CSS layout for the two columns.
<div class="mainwrap">
<div class="content">
text
</div>
<div class="sidebar">
<div class="right"><IMG src="stats.jpg" /></div>
<p>text</p>
<div class="right"><IMG src="rewards.jpg" width=148px /></div>
</div>
</div>
The right class:
.right
{float: right;
display: inline;}
I know everything looks a bit all-over-the-place, sorry for that.
Any help greatly appreciated.
- Lupi
.navline img
{
position: relative;
vertical-align: top;
display: block;
}
I believe display:inline is what you want.
<div class="right"><IMG src="stats.jpg" /></div>
Two things: (1) what is the CSS for the class ".right"? (2) what is the width of the image?
If your images are wider than the div that contains them FF will let them spill out and overlap other text, and IE will stretch the container to fit the image width, potentially breaking the layout.
cEM
The CSS for the .right class is
.right
{float: right;
display: inline;}
The div and the image have the same width. And as I said, using the right class one of the two images is correctly positioned. The other is not for some reason.
I changed the navline CSS to
...
display: inline;
...
but it didn't help.
- Lupi
