0

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 :/

6
Contributors
18
Replies
19
Views
6 Years
Discussion Span
Last Post by DarkBerzerk
Featured Replies
  • How big is your image?.. I've done a bit of a botch on my website, if you set: [code] #bulb_body{ min-height: <xxx>px; .... } [/code] where <xxx> is the height of your image, then it will make the background that size (atleast). [code]heigh:auto;[/code] should work, i've had some cross-browser issues … Read More

  • 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: [CODE] .bulb_body { width : 670px; background-image : url(../img/body_bg.jpg) repeat-y; margin-right : auto; margin-left : auto; } .bulb_body_left { width: 400px; … Read More

  • 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 Read More

0

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;
}
1

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.

Edited by fpsasm: n/a

0

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

0

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

1

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;
}
Votes + Comments
V.Good
2

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

Votes + Comments
V.Good
0

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.

0

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 :)

0

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

0

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

Edited by happygeek: link snipped

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.