Subscribe now and choose from over 30 free gifts worth up to £49 - Plus get £25 to spend in our shop
So now we have two people in the house with IT problems. It's not pretty. Mrs Grips is struggling with web design.
The main body of the page is a div, and we want to divide that div in half down the middle with some text on the right and an image on the left. Now, I thought that two divs of less than 50% of the width of the parent would simply be laid out left to right like text would be. but apparently not, they go one under the other both on the left. Developer tools in Chrome shows the photo and the paragraph with huge margins on the right, taking up the space all the way to the right hand edge.
We could use a table, but it's baffling me why it won't just lay the divs out like I am expecting.
sounds like you need a float left....[url= http://css.maxdesign.com.au/floatutorial/introduction.htm ]http://css.maxdesign.com.au/floatutorial/introduction.htm[/url]
The main body of the page is a div
Calling it mean names will get you nowhere. Play nice.
If you put borders or background colours on the divs it will help you see what you're doing.
Set margins and padding to 0.
Have a go at floating them. Either float both left, or one left and one right. Or just float the image left if you want the text to wrap around it. (If you do float them you may have to lookup a technique usually called clearfix).
The left div needs
#leftDivName {
float:left;
width:500px;
background:#9c9;
}
and the right
#rightDivName {
float:right;
width:500px;
background:#ffffff;
}
Of course play with your widths and background colours accordingly.
Cheers
Danny B