WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] 2 horizontal div's in % and in px

Reply
  Thread Tools Display Modes
Old 9th August 10, 06:59 PM   #1
White Blizzard
WLC Member
 
Join Date: Mar 2010
Posts: 6
Default 2 horizontal div's in % and in px

Hello guys,

I'm making a website and I ran into some problems...

I got 2 div's placed next to each other.

HTML Code:
<html>
<body>

<div id="left">&nbsp;</div>

<div id="right">&nbsp;</div>

</body>
</html>
I want div right to be 300 px widht so I gave it
Div left should take the leftover space.

Code:
css:


div#right {
width 300px;
float: right;
}

div#left {
width: 100%;
padding-right: -300px;
float: left;
}
But somehow this doesn't seem to work.

Am I missing something ??

Greetings,
White Blizzard is offline   Reply With Quote
Old 9th August 10, 07:29 PM   #2
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: 2 horizontal div's in % and in px

get rid of the "div" in front of the "#". Additionally, i'd wrap the page in a container div. if you're using a set px width instead of a %, you might as well set the other one.

Ryan.
rkrause is offline   Reply With Quote
Old 10th August 10, 03:06 AM   #3
sfadler
WLC Member
 
Join Date: Aug 2010
Location: Saint Louis Missouri
Posts: 47
Default Re: 2 horizontal div's in % and in px

I tested this in IE8, Firefox, and Chrome

Code:
#left {
	float:left;
	width:300px;
	margin-right:10px;
}
I made you a blog post here and you can download my source here
sfadler is offline   Reply With Quote
Old 11th August 10, 10:42 AM   #4
White Blizzard
WLC Member
 
Join Date: Mar 2010
Posts: 6
Default Re: 2 horizontal div's in % and in px

Quote:
Originally Posted by sfadler View Post
I made you a blog post here and you can download my source here
Tnx!!

I got that one. But I need the left div to be the right div and the other way around....

Well I think I'll figure it out.

Thanks guys,
White Blizzard is offline   Reply With Quote
Old 11th August 10, 01:56 PM   #5
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: 2 horizontal div's in % and in px

that should be as simple as changing either the class name or id name in the code, or just changing the float in the style sheet.

Ryan
rkrause is offline   Reply With Quote
Old 11th August 10, 02:14 PM   #6
sfadler
WLC Member
 
Join Date: Aug 2010
Location: Saint Louis Missouri
Posts: 47
Default Re: 2 horizontal div's in % and in px

Quote:
Originally Posted by White Blizzard View Post
Tnx!!

I got that one. But I need the left div to be the right div and the other way around....

Well I think I'll figure it out.

Thanks guys,
I would probably start with something like this

Code:
body { margin:0; padding:0; }
#wrapper { padding:10px; position:relative; }
#left { float:left; width:auto; margin-right:10px; padding:0 310px 0 0; }
#right { width:300px; position:absolute; right:10px;}
Blog post updated here and new source here.
sfadler is offline   Reply With Quote
Old 12th August 10, 10:30 AM   #7
White Blizzard
WLC Member
 
Join Date: Mar 2010
Posts: 6
Default Re: 2 horizontal div's in % and in px

Tnx got it!

O wait no I don't .....

This is my source :
http://pastebin.com/iM3z4AKJ

Somehow my right div likes the left side...


Any clue ?

Tnx,

Last edited by White Blizzard; 12th August 10 at 01:52 PM. Reason: Didn't got it...
White Blizzard is offline   Reply With Quote
Old 12th August 10, 09:07 PM   #8
White Blizzard
WLC Member
 
Join Date: Mar 2010
Posts: 6
Default Re: 2 horizontal div's in % and in px

*Bump* see above...
White Blizzard is offline   Reply With Quote
Old 12th August 10, 11:00 PM   #9
sfadler
WLC Member
 
Join Date: Aug 2010
Location: Saint Louis Missouri
Posts: 47
Default Re: 2 horizontal div's in % and in px

Quote:
Originally Posted by White Blizzard View Post
Tnx got it!

O wait no I don't .....

This is my source :
http://pastebin.com/iM3z4AKJ

Somehow my right div likes the left side...


Any clue ?

Tnx,
Just me being picky but you don't need to declare the element type when using id's and only when the class is shared by different elements.

So

Code:
<div id="something">
can just be

Code:
#something
and

Code:
<div class="something">
can just be

Code:
.something
unless

Code:
<div class="something">
<ul class="something">
then

Code:
div.something
ul.somthing
You probably aren't going to get the results you want unless you use an explicit width on both, you could use positioning but I think it will only complicate things. Whats with all the positioning attributes and no directional values? Below you can find the updated css I've applied a percent based width, padding, and margin to the left and right divs.

Code:
* { padding: 0; margin: 0; } 
html { background-color: #fff; height: 100%; width: 100%; } 
body { text-align: left; font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; height: 100%; width: 100%; overflow: hidden; }#container { min-width: 100%; height: auto !important; height: 100%; min-height: 100%; margin: 0 auto; } 
* html #container { height: 100%; width: 100%; } 
#container #header { height: 50px; width: 100%; background-color: gray; } 
#container #header #logo { height: 50px; width: 200px; } 
#container #main { margin: 0 auto; width: 100%; height: 100%; } 
#menu { margin: 0; padding: 0; list-style-type: none; width: auto; position: relative; display: block; height: 30px; font-size: 12px; font-weight: bold; background: transparent url(./img/nav_bg.png) repeat-x top left; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid #000000; border-top: 1px solid #000000; } 
ul#menu li { display: block; float: left; margin: 0; padding: 0; } 
#container #main #content-left { float: left; width:74%; margin:0 1% 0 0; } 
#container #main #content-right { width:22%; border-left: 2px solid gray; padding:0 0 0 2%; float: right; } 
#container #footer { bottom: 0; position: absolute; clear: both; height: 40px; line-height: 40px; width: 100%; margin: 0 auto; text-align: center; }
sfadler is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:06 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.