0

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

6
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by js112
0

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

0

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

0

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.

0

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

0

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;
}
This topic has been dead for over six months. 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.