CSS problems
 

  You don't need to be an 'investor' to invest in Singletrack: 6 days left: 95% of target - Find out more

[Closed] CSS problems

4 Posts
5 Users
0 Reactions
46 Views
Posts: 91000
Free Member
Topic starter
 

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.


 
Posted : 17/04/2013 5:32 pm
Posts: 1571
Free Member
 

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]


 
Posted : 17/04/2013 5:46 pm
Posts: 20675
 

The main body of the page is a div

Calling it mean names will get you nowhere. Play nice.


 
Posted : 17/04/2013 5:50 pm
Posts: 5297
Full Member
 

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).


 
Posted : 17/04/2013 8:19 pm
Posts: 0
Full Member
 

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


 
Posted : 17/04/2013 8:24 pm

6 DAYS LEFT
We are currently at 95% of our target!