Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    264
    Thanks
    49
    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:

    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?
    Last edited by SRD75; 10-08-2012 at 05:29 AM.

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    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:
    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.
    "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
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    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
    •