Display: Inline and display: block

Hi Experts,

I am doing a little experiment...I just placed 2 divs on my page, each of 95px, which were the same in  width.  However, as soon as I add the display: inline; line 10, 95px no longer equals 95 pixels.  I also added the min-width and max-width, hoping to force it, but no luck.

Why is this?
#divSample{
    border: 1px solid red;
    height: 100px;
    width: 95px;
    margin-bottom: 5px;
}
.tdHead{
    border: 1px solid green;
    display: inline;
    text-align: center;
    font-weight: bold;
    height: 70px;
    max-width: 95px;
    min-width: 95px;
}

Open in new window


 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>RS @ APD</title>	       
        
        <link rel="stylesheet" href="dispatch.css">        
            
</head>

    <body >

        <div id="divSample"></div>
        
            <div class="tdHead">Pickup Time</div>          
    
    </body>
 
 </html>

Open in new window

APD TorontoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Thomas StrussCommented:
Ah, young grasshoppa, Firebug is you friend.  No seriously, what does Firebug show?  Install it if you haven't already and then right-click on the item you're messing with on your webpage and check under "computed" and "layout" to see what's going on.
0
RobOwner (Aidellio)Commented:
When you put an element inline, it becomes like a span element, not a block element and as such doesn't have the same context.
It's like you writing a word and wanting it to be 95 characters wide regardless of what it contains.
try floating the div element instead
0
Chris StanyonWebDevCommented:
You can't set a width on inline elements, because they're inline. You need a block level element to set a width. Luckily, CSS has a property value called inline-block. This will keep an element inline but allow you to treat it like a block:

.tdHead{
   display: inline-block;
   width: 95px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.