Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Thanked 1 Time in 1 Post

    inline Div behaving like a block

    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:

    <div id="main-container">
      <div class="center">
        <div id="site">
          <div id="header" >
            <div id="contactus">
    	  1300 332 673
            <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:
    	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?
    Last edited by SRD75; 10-08-2012 at 06:29 AM.

  2. #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Thanked 56 Times in 56 Posts
    Well, it actually is a block element
    As describe in the css recommandation, using a float generates automaticaly a block box:
    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.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  3. #3
    Regular Coder
    Join Date
    Sep 2011
    Thanked 1 Time in 1 Post
    Thank you CandyGirl.

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


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts