Css div problem

customhosting 0 Newbie Poster · 2009-10-07T22:29:43+00:00

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

valonesal 0 Junior Poster · 2009-10-08T01:31:27+00:00

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

Troy III 272 Posting Pro · 2009-10-08T03:21:48+00:00

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
#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
<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.

Snehap 0 Newbie Poster · 2009-10-08T13:15:38+00:00

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

js112 0 Newbie Poster · 2009-10-09T16:45:18+00:00

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:

#child_div4{
clear:both;
}