inline Div behaving like a block

SRD75 · 10-08-2012, 05:26 AM

Hi. I'm editing a Wordpress on localhost. Unfortunately I cannot show you a live example. I'm hoping some screenshots and a description can help you diagnose the issue.

I've taken a Wordpress theme, and inserted a "contactus" div in the header:

Code:

<body>
<div id="main-container">
  <div class="center">
    <div id="site">
      <div id="header" >
        <div id="contactus">
	  1300 332 673
        </div>
        <div id="header-top">
          <div id="logo-container" class="center"><a href="<?php echo home_url(); ?>"></a></div>
          <div id="menu-container">

This is the page before inserting the contactus div.
This is the page after inserting the contactus div.

This is the CSS for contactus:

Code:

#contactus{
	height: 25px;
	float: right;
	padding: 1em 0.5em 0 0;
	display: inline;
}

As you can see, it is inline.

However, the div is pushing down the navigation menu, as if it is acting like a block.

I thought an inline element would occupy empty space, without pushing other things around?

Candygirl · 10-08-2012, 09:23 AM

Well, it actually is a block element

As describe in the css recommandation, using a float generates automaticaly a block box:

Quote:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

Adding a display:inline to a floating element has no effect except preventing the double margin bug in IE6.

SRD75 · 10-09-2012, 02:32 AM

Thank you CandyGirl.

I ended up using a background image to display the phone number.