5 replies [Last post]
miejsca
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2007-01-12
Posts: 3
Points: 0

Hi,

I'd like to make two columns, each 50% wide, inside a DIV. Yet I got no luck - the inside divs won't stay on the same level and the right one keeps getting below. Even if I put 49% some browsers (IE6) render it the wrong way.

The site: http://service.miejsca.org/
Style: http://service.miejsca.org/wp-content/themes/miejsca/style.css
Outside div: content
inside divs: content_left, content_right

#content{width:auto; z-index:1; position:relative; vertical-align:top; padding:0} #content:after{content:"."; display:block; height:0; clear:both; visibility:hidden} #content_left{float:left;width:49%;padding:0;margin:0} #content_right{float:right; width:49%;padding:0; margin:0;background:#fff url(/media/main_back2.gif) top repeat-x}

I'll be very grateful for a solutions, since I spent literally hours/days trying to fix it by myself.

MBChamberlain
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2007-01-12
Posts: 4
Points: 2

Have to define a vertical location

You should be able to give them an absolute position and define their top as 0px. (this will be in relation to their parent div)

#content{
width:auto;
z-index:1;
position:relative;
vertical-align:top;
padding:0}
#content:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden}
#content_left{
position:absolute;
top:0px;
left:0%;
width:49%;
padding:0;
margin:0
}
#content_right{
position:absolute;
top:0px;
right:0%;
width:49%;
padding:0;
margin:0;
background:#fff url(/media/main_back2.gif) top repeat-x
}

miejsca
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2007-01-12
Posts: 3
Points: 0

Thank you - yet it doesn't

Thank you - yet it doesn't work on my side (in FF2 nor IE7): the content div just disappears.

MBChamberlain
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2007-01-12
Posts: 4
Points: 2

They need to have content in

They need to have content in them...Here is the whole HTML I was working with.

Untitled Document

#content{width:auto; z-index:1; position:relative; vertical-align:top; padding:0}
#content:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
#content_left{
position:absolute;
top:0px;
left:0%;
width:50%;
padding:0;
margin:0;
background-color:#00FF00
}
#content_right{
position:absolute;
top:0px;
right:0%;
width:50%;
padding:0;
margin:0;
background-color:#FF0000
}

Stuff on the Left
Stuff on the Right

miejsca
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2007-01-12
Posts: 3
Points: 0

Thank you very much for your

Thank you very much for your help!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Did that fix the problem?

Did that fix the problem?

Verschwindende wrote:
  • CSS doesn't make pies