/    Sign up×
Community /Pin to ProfileBookmark

Right Float Div

Copy linkTweet thisAlerts:
May 27.2011

Another new website. I have two divs in the middle part, one is floating right. For some reason, I have a big space between them and the one on the right is going out of the middle section on the right. It’s easier to see this in a smaller browser window. I need the right div to move left a little.

Can someone help me fix this or give me a better way to build two columns?

Thanks!

[URL=”http://rlynngraphicdesign.com/tests/lifepoint/”]http://rlynngraphicdesign.com/tests/lifepoint/[/URL]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@J0106PrestonMay 27.2011 — Try not using the paragraph tags inside of the divs. It has done some significant changes for me.

Also, for the quote you have, don't be afraid to use the blockquote tag.
Copy linkTweet thisAlerts:
@Eye_for_VideoMay 27.2011 — If you want the right div moved left, left float it. If you right float it, it will move all the way to the very right edge of it's container.

Or you could push it away from the right edge by setting the right margin to a larger value. Or to push the contents left, add more padding-right.

As for not using <p> inside of <div>s ??? Never heard of anything like that! Any problems most like come from not correctly using other CSS.

Best wishes,

Eye for Video

www.cidigitalmedia.com
Copy linkTweet thisAlerts:
@aj_nscMay 27.2011 — Ditto to EyeForVideo....not putting p tag's inside of divs is not a 'solution' for anything.

An alternate idea might be to put a right margin on the right floated div, this will push it away from the right side of the container.
Copy linkTweet thisAlerts:
@J0106PrestonMay 27.2011 — Not putting the P's inside the divs has helped me with the extra block that it wanted to create within a block object in the first place... which at times has stretched out my divs it seems to larger sizes than I set them up to be. That's all I was saying on that regard.
Copy linkTweet thisAlerts:
@aj_nscMay 27.2011 — I can sympathize, CSS problems can be beyond irritating (especially the ones that only show up in, say, Safari on Mac, but not Safari on PC, but I digress). But I think the point that is trying to be made here is if there's a semantic reason for having p inside the div, and it's causing a CSS problem, then you should change your CSS instead of your markup.

However, like I had started to say, if you can find a solution that satisfies all browsers right away, you really don't want to mess with it further by trying to "improve" it, so I can understand your point.
Copy linkTweet thisAlerts:
@hotsaucencakeauthorMay 31.2011 — Thanks everyone for your help! I ended up adjusting the widths until they were stuck together. I had them together before, but it didn't seem right to me. I was using a sizer tool to adjust my browser window sizes to 800px wide because that's about as small as it would be going, and the container, set at 800px, was running off the screen on the right. I guess I'll just leave it that way.

Thanks again!
Copy linkTweet thisAlerts:
@cmcpMay 31.2011 — Don't put paragraphs inside a div? Madness!

Ditto above: float your content areas to the left within your container.
Copy linkTweet thisAlerts:
@hotsaucencakeauthorMay 31.2011 — I wanted the content floated to the right, so floating it left wouldn't work, it just seemed to be going too far to the right, outside the container I put it in. I've fixed it though, thank you everyone for your help.
Copy linkTweet thisAlerts:
@cmcpMay 31.2011 — If your inner floated div widths add up to more than the container width they might force out depending on your styles.

It's easiest to understand the box model and float your divs to the left in a snug container div. The content will sit to the right of the nav even though it's floating to the left.
×

Success!

Help @hotsaucencake spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...