stuck in a rut

[Martin_Man]

Hi Guys I'm stuck in a rut... I've been trying to work out a bit of css which i can't seem to get my head around and its making it hurt.

i got 2 DIVs as shown...

<div class="text">
  <h2>Welcome</h2> 
  <p> To my site.... </p>
</div><div class="image">
    <p>Image Here</p>
  </div>

This is my Css for them

.text {
	width: 300px;
	height: 200px;
	text-align: left;
	float: left;
}

.image {
	width: 300px;
	height: 200px;
	vertical-align: top;
	float: right;

}

example how it ends up

I'm trying to get the 'image here' text appear to the right side of the page next to the 'welcome' but I'm not sure how to. can anyone help me its so frustrating thanks

mart

 

[philjohn]

problem is, the float on the parent div makes it inline, so the 2nd div will never go to the right of the page.

Put them both as child divs of a main parent one with overflow: hidden, the text one float: left and the other float:right

also, if these div's are only used once, use an ID instead of a class.

 

[Martin_Man]

thanks mate works grate . this look ok to you? here

 

[philjohn]

Ok in firefox, but in IE 7 the page isn't centered. I cannot remember how that's done off the top of my head (I'm not a CSS guru), I think it can be done with setting margins to auto on the left and right or some such.

 

[Martin_Man]

ok I'll have a mess around with it and i'll let you know. other then that tho any tips on the design?

 

[t31os]

Yep... add this to body in CSS..

margin:0 auto 0 auto;

Should do it...
Of course you can set the top and bottom if you like...just leave the sides on auto.

 

[Martin_Man]

i got another situation if you look at my page here. you can see the image overlapping the bottom border how do i change it so it doesn't???

heres my codes

<div id="center">
  <h3>Landscape</h3> 
<a href="video 2.php" onclick="return popitup('video 2.php')"
	><img class="video" src="images/video.jpg" width="215" height="140" longdesc="images/video.jpg" /></a>
</div>

<div id="bottom"></div>

and and this is the css code

#content {
	margin-bottom: 15px;
	padding: 0;
	width: 700px;
	height: 200px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}

thanks for any help

 

[Tripnologist]

Remove the height on your #center div. Actually, you shouldn't need to use height at all.

Also, looking at your code. It's bad.

If you would like, I can redo it for you quickly so you can see how it should be done?

 

[Martin_Man]

sorry i know... I'm a video photographer not a web designer but I'm trying to make a site portfolio which looks professional with little knowledge of HTML, css and php. I'm doing all my site biased on quick online tutorial and its very hard. but what you said will be very helpful. I'll give what you said a go about the height to see if that helps.