Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 604

Oct 7th, 2009

Css div problem

Expand Post »

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

(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

(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

Similar Threads

CSS Div problem in HTML and CSS
CSS/ Div Positioning problem in HTML and CSS
CSS Div help needed in HTML and CSS
CSS seperator problem in HTML and CSS
Have a problem with centering "jpg" files in HTML and CSS

rajeesh_rsn

Reputation Points: 10

Solved Threads: 0

Posting Whiz in Training

Offline

265 posts
since Sep 2008

Permalink

Oct 7th, 2009

Re: Css div problem

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

customhosting

Reputation Points: 10

Solved Threads: 3

Newbie Poster

Offline

7 posts
since Oct 2009

Permalink

Oct 7th, 2009

Re: Css div problem

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

valonesal

Reputation Points: 10

Solved Threads: 2

Junior Poster

Offline

120 posts
since Aug 2009

Permalink

Oct 7th, 2009

Re: Css div problem

Click to Expand / Collapse Quote 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
(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
(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.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

511 posts
since Jun 2008

Permalink

Oct 8th, 2009

Re: Css div problem

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

Snehap

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Oct 2009

Permalink

Oct 9th, 2009

Re: Css div problem

Click to Expand / Collapse Quote 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:

HTML and CSS Syntax (Toggle Plain Text)

#child_div4{
clear:both;
}

js112

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Convert .wav file into bytes

Next Thread in HTML and CSS Forum Timeline: Css submenu

DaniWeb Message

Cancel Changes

User Name
Password