Dusing div tages to position text and image

HTML & CSS
1

hi

I’m very new to css and am cutting my teeth by building a basic site. Below is the link.

http://demo.webfreehosting.net/test/

Not sure why, but the text called ‘interview clip by mr x’ was showing up just above my placeholder image, but when i preview it the browser its jumped.

I have defined two div tags within the following centre column container

centre colum container code where im trying to position my images and text


#centerColumn { 	
margin:0 0 0 180px;
padding:0;
background-color:#ffffff;
}

below are my div tags for text and image


#container #centerColumn #videos {
	width: 200px;
	position: relative;
	height: 200px;
	float: left;
	left: 150px;
}
#container #centerColumn #label {
	position: relative;
	top: -40px;
	left: -50px;
	width: 150px;
}

Can advice on how i can fix this much appreciated.

2

Hi Phil

Many thanks for that, and i will try your method out . After i had posted my message to you i tried grouping a text label and video placeholder together in one div. That seemed to work and i had less code to deal with. Before i had created indvidual divs for each placeholder and each text. what a nightmare that was.

If you look at this page you will see what im trying to do.

http://demo.webfreehosting.net/check.html

I want to get the plaecholder 6 image under the placeholder 4. I’ve managed to get 3, 4 and 5 working properly. Can you see why placeholder 6 wont sit directly beneath placeholder 4? The code in the link you can see is not the uptodate version, but the page does show you want i would like to achieve.

I thought i could replicate the code for placeholder 4 and use it for 6, seeing as 4 works.

here is my code for 6


#container #centerColumn #vid6 {
	width: auto;
	height: auto;
	float: right;
	margin-right: 150px;
}

This is my html


<div id="vid6"><h4>Skills: Height, Weight & Girth
   </h4><img src="images/VIDEO-IMAGES6.jpg" width="200" height="200" alt="vid6"/></div>
3

This is an example of how it can be achieved.

You have a video placeholder and a label. The label goes under the placeholder. Placing each in a div achieves that. We want to keep these two bits of information together so we put them both in a div (with the class videocontainer). We style this have the right width. You want two such video containers side by side - so we float: left and keep them apart with a margin-left;

Finally we wrap bother video contains in a div (id=videos). the overflow: hidden makes that div contain the floats.

<html>
<head>
<style>

#videos {
	overflow: hidden;
}

#videos .videocontainer {
	float: left;
	margin-left: 50px;
	width: 200px;
}

#videos .videocontainer .videoplaceholder{
	height: 200px;
}


</style>
</head>
<body>
<h1>Video side by side</h1>
<div id="videos">
    <div class="videocontainer">
        <div class="videoplaceholder">
            <img src="http://demo.webfreehosting.net/test/images/VIDEO-IMAGES.jpg" width="200" height="200" alt="video1">
        </div>
        <div class="videolabel">
            my label for thd first video container
        </div>
    </div>
    <div class="videocontainer">
        <div class="videoplaceholder">
            <img src="http://demo.webfreehosting.net/test/images/VIDEO-IMAGES.jpg" width="200" height="200" alt="video1">
        </div>
        <div class="videolabel">
            my label for thd 2nd video container
        </div>
    </div>
</div>
<hr />
</body>
4

Hi Phil

That’s perfect, if i wanted to have another placeholder image next to one i have, would i need to float it right ? i have this so far


#container #centerColumn #videos2 {
	height: 200px;
	width: 200px;
	float: right;
}

Ideally i would like it at the same height as the one next to it with a short gap in between. i have tried to do this, but always get mixed results.

5

Not really understanding the effect you are after.

Try

#container #centerColumn #videos {
	width: 200px;
	height: 200px;
	margin-left: 150px;
}
#container #centerColumn #label {
	margin-left: 150px;
	width: 200px;
}

This will indent the video div by 150px and fix its height and width;

The label will similar be indented by 1500px and thus appear under the video placeholder.

If you want the label above just move it before #videos in the html.