HTML and CSS

Css div problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2008

Posts: 138

Reputation: rajeesh_rsn is an unknown quantity at this point

Solved Threads: 0

rajeesh_rsn rajeesh_rsn is offline

Offline

Junior Poster

Css div problem

Oct 7th, 2009

Hai Friends,

I am designing a CSS based website, Well in that I need to adjust 3 div inside a main div as in the form of a table cell. Like this

====== Parent Div ===================
|||Child Div1 |||--|||Child Div2 |||--|||Child Div3|||
==================================

I had the code like this

CSS

Help with Code Tags

(Toggle Plain Text)

#parent_div{
display:block;
width:900px;
height:200px;
}

#child_div1{
display:inline;
width:300px;
height:200px;
background:url(one.gif) left no-repeat;
}

#child_div2{
display:inline;
width:300px;
height:200px;
background:url(two.gif) left no-repeat;
}

#child_div3{
display:inline;
width:300px;
height:200px;
background:url(three.gif) left no-repeat;
}

html code

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="parent_div">
<div id="child_div1"></div>
<div id="child_div2"></div>
<div id="child_div3"></div>
</div>
</body>
</html>

I tried this code but it doesn't showing anything. Please give me a little help about this issue.

Thanks
Rajeesh

•

Join Date: Oct 2009

Posts: 7

Reputation: customhosting is an unknown quantity at this point

Solved Threads: 1

customhosting customhosting is offline

Offline

Newbie Poster

Oct 7th, 2009

By nothing do you mean it is displaying absolutely nothing, or are there missing images? You could try putting blanks in the divs (   )

Quality VPS Hosting Use coupon 100FREE to get double memory & bandwidth!

•

Join Date: Aug 2009

Posts: 93

Reputation: valonesal is an unknown quantity at this point

Solved Threads: 2

valonesal

Offline

Junior Poster in Training

Oct 7th, 2009

Try removing the display:inline from your css and see if that helps, when I tested it using colors for your backgrounds it worked.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Oct 7th, 2009

•

Originally Posted by rajeesh_rsn

Hai Friends,

I am designing a CSS based website, Well in that I need to adjust 3 div inside a main div as in the form of a table cell. Like this

====== Parent Div ===================
|||Child Div1 |||--|||Child Div2 |||--|||Child Div3|||
==================================

I had the code like this

CSS
Help with Code Tags

(Toggle Plain Text)
#parent_div{
display:block;
width:900px;
height:200px;
}

#child_div1{
display:inline;
width:300px;
height:200px;
background:url(one.gif) left no-repeat;
}

#child_div2{
display:inline;
width:300px;
height:200px;
background:url(two.gif) left no-repeat;
}

#child_div3{
display:inline;
width:300px;
height:200px;
background:url(three.gif) left no-repeat;
}
#parent_div{ display:block; width:900px; height:200px; } #child_div1{ display:inline; width:300px; height:200px; background:url(one.gif) left no-repeat; } #child_div2{ display:inline; width:300px; height:200px; background:url(two.gif) left no-repeat; } #child_div3{ display:inline; width:300px; height:200px; background:url(three.gif) left no-repeat; }
html code
Help with Code Tags

(Toggle Plain Text)
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="parent_div">
<div id="child_div1"></div>
<div id="child_div2"></div>
<div id="child_div3"></div>
</div>
</body>
</html>
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="parent_div"> <div id="child_div1"></div> <div id="child_div2"></div> <div id="child_div3"></div> </div> </body> </html>
I tried this code but it doesn't showing anything. Please give me a little help about this issue.

Thanks
Rajeesh

This shall work in Explorer but will not work in firefox. And if you fix it in firefox you will break it on IE. Try using IE conditional css to hide it from firefox and change your display property from inline to inline-block in FX
than remove any whitespace beteween divs in your html so you could eliminate the anoying whitespace added by fx for some irrational reason that I can't understand or explain.

•

Join Date: Oct 2009

Posts: 4

Reputation: Snehap is an unknown quantity at this point

Solved Threads: 0

Snehap

Offline

Newbie Poster

Oct 8th, 2009

Hi Rajesh,

Try this below style. I have used backgroun color instead of images.

#parent_div{
display:block;
width:900px;
height:200px;
}

#child_div1{
float:left;
width:300px;
height:200px;
background-color:red;

}

#child_div2{
float:left;
width:300px;
height:200px;
background-color:black;

}

#child_div3{
float:left;
width:300px;
height:200px;
background:orange;
}

Regards.
Sneha

•

Join Date: Oct 2009

Posts: 18

Reputation: js112 is an unknown quantity at this point

Solved Threads: 0

js112

Offline

Newbie Poster

Oct 9th, 2009

•

Originally Posted by Snehap

Hi Rajesh,

Try this below style. I have used backgroun color instead of images.

#parent_div{
display:block;
width:900px;
height:200px;
}

#child_div1{
float:left;
width:300px;
height:200px;
background-color:red;

}

#child_div2{
float:left;
width:300px;
height:200px;
background-color:black;

}

#child_div3{
float:left;
width:300px;
height:200px;
background:orange;
}

Regards.
Sneha

yeah, try this one, i think this will work. and remember, if there is anyting else under child_div3 (such as child_div4), you should add this in the css file:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)