/    Sign up×
Community /Pin to ProfileBookmark

Position Left and Right Div

Copy linkTweet thisAlerts:
Oct 02.2008

Hi Guys,

Im trying to get 3 Divs to work for me, I have 1 that is like a container and inside I have 2 Divs Id like to sit side by side like a table with 1 row and 2 colums…

This is my Code I guess I somehow need to tell the divs where to sit to work but Im just not sure, at the moment the left and right sit on top of each other and Id like them to sit side by side,
Any thoughts are appreciated on how to code the CSS for all browsers.

[code]
<div >
<div style=”width:50%;”>Left</div><div style=”width:50%;”>Right</div>
</div>
[/code]

Many Thanks..
Tag

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@dtm32236Oct 02.2008 — [code=html]<div>
<div style="width:49&#37;; float:left;">left</div>
<div style="width:50%;">right</div>
</div>[/code]

You'll often run into problems when doing 50% and 50% - many browsers round up when calculating percentages (so if 50% of whatever width is 305.4px, it'll round up to 506px - often resulting in a with that's over 100%). I don't know if that makes sense - but trust me - you should always keep it just under 100%.

Anyway, that should work...
Copy linkTweet thisAlerts:
@TagUK2006authorOct 02.2008 — Thanks,

Ive put this into my Style sheet and seems to be fine....

<i>
</i>/* Left Div */
.LeftDiv1 {
width: 49&amp;#37;;
padding: 0 0px;
float:left;
text-align: left;
}

/* Right Div */
.RightDiv1 {
width: 50%;
padding: 0 0px;
float:right;
text-align: left;
}

Thanks again
Tag
Copy linkTweet thisAlerts:
@dtm32236Oct 02.2008 — Good.

padding: 0 0px;

is the same as

padding: 0;

and text-align: left

should be the default, you shouldn't need that.

You might want to add margin:0; too - as some browsers may give divs a default margin size (although that's improbable)
Copy linkTweet thisAlerts:
@TagUK2006authorOct 02.2008 — Good.

padding: 0 0px;

is the same as

padding: 0;

and text-align: left

should be the default, you shouldn't need that.

You might want to add margin:0; too - as some browsers may give divs a default margin size (although that's improbable)[/QUOTE]


Thank U.. :-)
Copy linkTweet thisAlerts:
@dtm32236Oct 02.2008 — No problem.
Copy linkTweet thisAlerts:
@TagUK2006authorOct 02.2008 — Hi dtm32236

Im wondering what I need to change to add padding to the left and right Divs I tried adding the usual CSS i use like style="padding-left:10px;" to the DIV tag itself or into the style sheet and its throwing the divs all over the place..

I tried knocking 20 px off each dive to compensate for adding padding but im still not getting that bit and wondered if you could assist me on adding alittle padding to the Left and Right Divs ive just created.

Many Thanks

Tag
Copy linkTweet thisAlerts:
@dtm32236Oct 02.2008 — well, if you're using a fluid layout, you'll need to stick to percentages

so, instead of having 49&#37; and 50% divs, make two 46% divs (equaling 92%)... now you have 7% to play with

So you can put 3% padding on one and 3-4% padding on the other. Does that make sense?

Just realize that if you do padding:2%... that's 2% left and 2% rigth = 4%.
Copy linkTweet thisAlerts:
@TagUK2006authorOct 02.2008 — I see..

Thank you I missed the post so am just getting back to the PC now, what your saying makes sence so the reason it was throwing things was probably due to me using percentages and pixels mixed and just not gettting the math bang on...I will give this a try later but thought Id better try rather than take the easy way out and put in a table lol

Thanks very much once again

Regards

Tag
Copy linkTweet thisAlerts:
@TagUK2006authorOct 02.2008 — Works a treat :-)
Copy linkTweet thisAlerts:
@dtm32236Oct 03.2008 — awesome - glad it worked out
Copy linkTweet thisAlerts:
@boycottIEOct 03.2008 — Just wanted to say thanks for posting this question and to all of you who helped out. I came upon this thread while designing my own site and it helped a lot, especially the suggestion about keeping percentages under 100%.

boycottIE
Copy linkTweet thisAlerts:
@dtm32236Oct 03.2008 — no problem - this place will help out a ton... people here are more than willing...
×

Success!

Help @TagUK2006 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 5.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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