Member Avatar for 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

#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
  • 148 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by js112

Recommended Answers

All 5 Replies

Member Avatar for customhosting

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

Member Avatar for valonesal

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

Member Avatar for Troy III

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.

Member Avatar for 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

Member Avatar for js112

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.