Cant get divs in a row!!!!!!

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Hi All

I'm trying to layout a page with divs. but my problem is trying to get the divs to sit next to each other? every time I add a div it sits under the previous one?? for instance I have <div id=one> with an image and I want <div id=two> to appear next to it with text about the image. I have tried playing with the div size to see if it was an overflow issue but no luck. the only way I have solved this is by setting the image in div one as a no repeat background and giving div two a margin the same size as the image. but I'm sure there must be a better way to do this and its not ideal as I would like to assign a link to the image which I cant do when it is a background.

here is part of the code for the page im struggling with.

<!--CSS
#container {
background-image: url(Images/img.png);
background-repeat:no-repeat;
width: 725px;
height: 1000px;
text-align:left;
}

#photo {
margin-left:10px;
margin-top:10px;
height:400px;
background-image:url(Images/Large.jpg);
background-repeat:no-repeat;
text-align:left;
}

#text {
margin-left:200px;
margin-top:10px;
width:230px;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


*/HTML*/
<div id="container">
<div id="photo">
<div id="text">
Text about Image
</div>
</div>
</div>


I am a bit of a noobie to this so let me know if I am missing somthing??? its very likley I am!!

Many Thanks.

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Code:

Float: Left/Right;

Add that to the DIV CSS you want to float next to the other. That should do it.

It may actually be a good idea to create a class to wrap the image and text in and have the columns next each other.

Code:

#imagewrap {Float: Right;}

Code:

<div class="imagewrap">

<div class="image"> </div>
<div class="text"> </div>

</div>

<div class="imagewrap">

<div class="image"> </div>
<div class="text"> </div>

</div>

kind of like having a box with the image and text inside it, but the same box next to it with another image and text in.

 

Excellent! thanks! I'll try that. what a speedy service!!

 

Also, try not to use background images as you will not be able to copy them or use the divs again (as you will have the same image in every div). just create the div and tailor your images so they are a;ll the same size, you can also use CSS to define a caption underneaths an image as well if you do a quick google.

You also do not need to specify a height of the container div, as you will have to keep changing it when you want more content, just let it expand along the Y axis automatically.

 

Thanks I only used the Background image because I wanted to place some text and links above the image. dont know how to place divs on top of each other like layers do you??

Thanks Again.

 

I couldn't tell you off the top of my head, the only time I ever do is with multiple background images,

So 'ill have wrapper1, wrappe2 and so on all nested within each other but exactly the same size, each with a different background image to create the desire effect I need. Along with HTML and BODY background images.

They are the only time I use it.

As far as I am aware, Z index is for that purpose, but you have to specify a few CSS properties otherwise it simply doesn't work.

 

Yeah I had a go with Z index but couldnt get it to work.

Thanks for all your help really appreciate it.

 

I'll make you feel better- I had exactly the same problem- couldn't get two divs to sit next to each other
Either way, glad it's sorted!

 

Z Index has to have certain properties specified otherwise it simply won't work. One of these is the position property, it needs to be specificalyl set to any of the options.

Kind of like

If i wanted normal test I would just type it, but in order for the Z index to work, I would have to set it to Text-Transform: Normal.

 

Sorry you've lost me there??? got any code examples to look at?

Cheers.

 

I have a DIV with some text in, I don't want any formatting on that text, just bog standard text.

the CSS would look like

Code:

#example1{
}

If I wanted normal text, I wouldn't specify anything.

However, I could change it too

Code:

#example1{ text-transform: normal;}

The end result would still be, normal text with no formatting, just bog standard text like in notepad. So in a real world, you would NOT put that CSS property in (after all, it isn't needed as that is what CSS defaults to if it is no specified)

It is the same with Z Index, you NEED to specify a few CSS properties regardless.

Position: Relative>Absolute>Inherit (or whatever the properties are)

I think if you do not specify in the CSS the above property, it defaults to relative, but in order to use Z-Index you would have to specifically set it to "Position: Relative;". Usually you wouldn't bother entering that into the CSS as the default is relative, but in order to use Z-Index you have to specify it.

That was a pretty long winded example.

but in short, you need to specify a few CSS properties that you would usually leave out because they are defaults.

Another way is using Negative MArgins to overlap DIVs

IE

Margin: 0 0 -50px 0;

 

<div id="container">
<div id="photo">
</div>
<div id="text">
Text about Image
</div>
</div>

Did you try that?

 

it isn't a nesting issue, it is a float issue mate.

 

Still makes my inner programmer cringe when I see incorrect nesting though, especially when you have inheritance to contend with.
Mind you, my inner programmer cringes at the thought of having to deal with the erm... eccentricities of CSS full stop.

 

That is how I ended up doing it Soundian but I did want to have the text div next the photo within the photo div guess thats not the done thing?

Westernkings the suggestion for the minus margins is golden!! sorted my issues easily!

Thaks to every ones suggestions and help.