homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Div not aligning properly
arya6000




msg:4183832
 2:35 pm on Aug 8, 2010 (gmt 0)

Hello

I'm trying to have 2 divs side by side, but the one on the right always goes below it, here is the link to the site [urlgone.com...] the link takes about 5 seconds to redirect to the site.


How can I make the div that contains "Latest Articles go by the side of the menu?


Best Regards

 

SimonPlus




msg:4183885
 6:15 pm on Aug 8, 2010 (gmt 0)

I think removing "float: right" from "div.rightPart" and add "float: left" to "div.mainMenu" could help! (I'm not sure)

Major_Payne




msg:4183894
 6:27 pm on Aug 8, 2010 (gmt 0)

If you want to control the spacing between the two divs that are side by side, put both of the divs in a wrapper div. Float one left and the other right. Set a width for the wrapper div and center it with: margin: 0 auto;

Example [paynelessdesigns.pastebin.com]

LouiseMarie




msg:4188598
 11:22 am on Aug 18, 2010 (gmt 0)

You could remove the float property and set it to display:inline-block; (then add margin-left to the first one to space it out if required.)

It is possible that if the float property is pushing it underneath that maybe there isn't enough space in the wrapper div for the two elements to sit side by side. To test this leave your code as is with the float properties and reduce the width of the second div to see if you can sit it next to it.

Shado




msg:4192616
 4:18 pm on Aug 26, 2010 (gmt 0)

I'm with MP on this. This is the basic code I use for a centred 3 column website. Hope it helps.

<div id="wrapper"></div>
<div id="sidenav"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>

#wrapper{width:780px; height:800px; margin:10px auto;}
#sidenav{width:80px; height:800px; float:left;}
#sidebar{width:80px; height:800px; float:right;}
#content{width:605px; height:800px; float: left; margin: 0px 10px;}

PS: I always make my biggest div (content) 2 to 5px smaller than width of sidebar + width of sidenav + 10px margin of content - the width of the wrapper.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved