Little Div issue

[DarkBerzerk]

Hey guys,
i was making some thing easy and small and I've made it many times ago,
i want to make Div tag with width 670px and insite it two Div tags as 2 golumns
the left 400px and the right 370px..

<div class="bulb_body">
  <div class="left_column">
    <p>This is test Pharagraph.</p>
  </div>
  <div class="right_column">
    <p>Content for  class "right_column" Goes Here</p>
  </div>
</div>

and here is the CSS:

.bulb_body {
	width : 670px;
	background-image : url(../img/body_bg.jpg);
	margin-right : auto;
	margin-left : auto;
	background-repeat : repeat-y;
}
.bulb_body .left_column {
	width: 400px;
	float: left;
}
.bulb_body .right_column {
	width: 270px;
	float: right;
}

when i test the background of the bulb_body Div dont appear :/ ... and when i remove the float: right; from the .bulb_body .right_column the background appear but the right_column centered :/

[fpsasm]

Try using # instead of .

#bulb_body {
	width : 670px;
	background-image : url(../img/body_bg.jpg);
	margin-right : auto;
	margin-left : auto;
	background-repeat : repeat-y;
}
#bulb_body #left_column {
	width: 400px;
	float: left;
}
#bulb_body #right_column {
	width: 270px;
	float: right;
}

[DarkBerzerk]

Same Issue :/.. the background dont appear

[fpsasm]

How big is your image?..

I've done a bit of a botch on my website, if you set:

#bulb_body{
      min-height: <xxx>px;
      ....
}

where <xxx> is the height of your image, then it will make the background that size (atleast).

heigh:auto;

should work, i've had some cross-browser issues with that though.

oh btw, if your website is on a linux box, remember, that it's case sensitive.

[DarkBerzerk]

Working finally when i make ur idea "min-height" but when i also make

margin-left: 60%;

not float-right :/ i hope no issue happen because of that

[fpsasm]

Working finally when i make ur idea "min-height" but when i also make

margin-left: 60%;

not float-right :/ i hope no issue happen because of that

Cool

[DarkBerzerk]

Thanks, Sir. :)

[sagive]

Men those numbers are annoying :)
first thing.. if you have another div with the same name i would change them and make simepler path of css...

Try this:

.bulb_body {
width : 670px;
background-image : url(../img/body_bg.jpg) repeat-y;
margin-right : auto;
margin-left : auto;
}

.bulb_body_left {
width: 400px;
float: left;
}

.bulb_body_right {
width: 270px;
float: right;
}

[nadia_awan]

try this code with same your CSS,when use float(left,right)in your div.at the end you must "clear the fload"...
<div class="bulb_body">
<div class="left_column">
<p>This is test Pharagraph.</p>
</div>
<div class="right_column">
<p>Content for class "right_column" Goes Here</p>
</div>
<div style="clear:both"></div>
</div>

see this http://www.tutorials99.com

[shaya4207]

Hi, if this question has been answered, please post it as 'solved'...

[DarkBerzerk]

@sagive, @nadia_awan .. thanks too much, Solved.

[teedoff]

I would personally like to see if and how this issue was resolved...lol

First, he defined classes for his divs, so in which case the period notation was correct.

But the issue is he had a div 670px wide and then two contained divs, one 400px, the other 270px. That doesnt count for default margins and paddings. SO the box model would not be correct.

[DarkBerzerk]

Its too simple,
HTML Code:

<div class="bulb_body">
	<div class="bulb_body_left">
	Left Contents
	</div>
	<div class="bulb_body_right">
	Right Contents
	</div>
	<div style="clear:both"></div>
</div>

And The CSS Code:

.bulb_body {
	width : 670px;
	margin-right : auto;
	margin-left : auto;
	background-image: url(../img/body_bg.jpg);
	background-repeat: repeat-y;
}

.bulb_body_left {
width: 400px;
float: left;
}

.bulb_body_right {
width: 270px;
float: right;
}

and the solve was adding Clear Div :)

[teedoff]

Yep that does the trick...Glad you got it working!

[DarkBerzerk]

thanks

[teedoff]

Can I ask what kind of site your working on??

[DarkBerzerk]

Hotel Website ^^ .. why?

[teedoff]

Oh I noticed the names of your divs...."bulb" I work for a replacement bulb ecommerce site..lol
Just thought it was funny.

[DarkBerzerk]

no bulb isnt the name .. i used to name all my sites divs bulb :) .. the website is SNIP