CSS - Display: Inline-block - Padding?

I'm reading the "containing blocks" section of http://www.brainjar.com/css/positioning/:

"Block boxes are generated by elements such as P, DIV or TABLE."

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

"It's interesting to note that while the text of the first sentence in the above example generates an inline box"
-Didn't they say that block boxes are generated by div? So why isn't the text of the first sentence in a block box?

Hi, I am still quite new to CSS so forgive me if this is a silly question but I have created a DIV layout that look something like

Code:

<div class=row><div class=square>A</div><div class=square>B</div><div class=square>C</div></div>

In the CSS "row" is designated as display type BLOCK
"square" is designated as "INLINE-BLOCK"

in safari, firefox etc this comes up showing the A,B & C next to each other in their own styled boxes. This is how I want to be.

However in Internet Explorer (currently testing it on v8), the A ,B and C show up , one underneath the other in a straight line down the page. This is not cool.

To fix this issue, I tried changing the inline-block to just "inline" This works fine now in IE, the squares are next to each other like i wanted, but now when I test it on safari,firefox, the boxes go straight down the page!

Am I missing something here? I would rather not make a special style sheet for IE if there is a solution that will help make it work on all three browsers.

It just seems strange that the display types are working completely opposite to each other .

Any help would be appreciated.

below if the full CSS rules if that helps any

Code:

.row {
		width: 100%;
		height: 30px;
		display: block;
		font-size: 14px;
		text-align: center;
		font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	}
.square {
	
		display: inline-block;
	
		background-color: #eeeeee;
	
		line-height: 30px;
		height: 30px;
		width: 30px;
		border-width: 1px;
		border-color: #000000;
		border-style: solid;
	}

I am a 3week knewb to css.
I was wondering if anyone could explain to me when I would use:

div or display:block
div or span
span or display:inline

thank you

Hi!

Is it OK to mix inline and block elements?

For example:


<imp ... />

<p> .... </p>


Thanks

Hi all, I've got a problem on my hands. I've been restructuring the site I work on from their FrontPage code to complete XHTML + CSS.

I always thought that by using span's that I could make a block level element display inline, but keep all of it's block level uniqueness, such as height and width and other items, but would display right next to other elements. Works great with headers and such but not with boxes.

I created a 4 <span> system inside a centered div, figuring they'd all work. But span's don't keep their block level uniqueness, so nothing displayed at all! I fixed 3 of these 4 by putting their background images inside the spans, which I wanted to avoid, but it works so I won't complain on that.

Now I have this.

Code:

<div id="bigdiv">
<span id="maptop"><img src="images/2004/new_main_front/wel_left_top.jpg" alt="Welcome!" /></span><span id="feattop"><img src="images/2004/new_main_front/feat_right_top.png" alt="" /></span><br />
<span id="mapbot"><img src="images/2004/new_main_front/wel_left_bot.jpg" alt="" /></span><span id="featbot">This is where things will go.</span><br />
</div>

Span id featbot has no images, it has a repeat-x background so that I can place and change text in there at will. Because of this, and it being a span, it wraps only to the size of the text, which isn't good.

I found a display: inline-table (displays as a table, but inline, pretty obvious), which works great in Safari for OS X, but not in IE 6 or Firefox on Windows.

How would I structure this correctly so that it actually does work?

Here is an image showing the design and how it's set up (ignore the gradients, they're not being used). As you can see where featbot is, that's where text will go, the others are images, so they display right.

Suggestions? I'm really confused here...

Thanks.

Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed.

I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type.

Any ideas?

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <title>Title</title>

  <style type="text/css">
  img{
    border: 0px black solid;
    height: 200px;
  }
  div.outerholder{
    display: inline;
  }
  div.innerholder{
    text-align: center;
    height: 200px;
    width: 267px;
    margin: 0px;
    padding: 0px;
    display: block;
  }
  div.centerme{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  </style>

</head>

<body>

<div class="centerme">
<div>
  <div class="outerholder">
    <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div>
  </div>
  <div class="outerholder">
    <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div>
  </div>

</div>
<div>
  <div class="outerholder">
    <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div>
  </div>
  <div class="outerholder">
    <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div>
  </div>

</div>
<div>
  <div class="outerholder">
    <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div>
  </div>
</div>
</body>

</html> 





P.S. It also doesn't center properly in FF, but that's secondary...

Hello,

First, I am new to webcoding so I apologise if what I am asking is too stupid. I am doing a little navigation bar for my blog with the hover effect. My problem is that the hover effect only work when I use {display: block;} but I need it to be inline, because when doing {display:block} it displays vertically. However when I do {display: inline-block;} the list items do show up inline horizontally but they show up only as images, neither does the hover effect or the links work.

Second, in IE and in chrome it displays differently.

Thank you very much for all the help!

Also, here is the code!

CSS

#header-wrapper2{
height:80px;
width:580px;
margin:0;
float: right;
background-color: #000000;
}

#header-wrapper2-navbar{
height: 40px;
width: 243;
margin-top:40px;
margin-left: 3px;
padding:0;
}

#header-wrapper2-navbar li{
margin:0;
padding:0;
}

#header-wrapper2-navbar li,#header-wrapper2-navbar a{
height: 40px;
display: block;
}

#news{
left:0px;
width:78px;
background: url('') 0 0;
}

#news a:hover{
background: url('') 0 -44px;
}

#products{
left:78px;
width:88px;
background: url('') -78px 0;
}

#products a:hover{
background: url('') -78px -44px;
}

#about{
left:166px;
width:77px;
background: url('') -166px 0;
}

#about a:hover{
background: url('') -166px -44px;
}

HTML

<div id='header-wrapper2'>
<ul id='header-wrapper2-navbar'>
<li id='news'><a href='()></li>
<li id='products'><a href='></li>
<li id='about'><a href='></li>
</ul>
</div>

Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button.

Code:

#nav li{
display:inline;
}


a#aboutrollover { 
background-image:url(images/nav/about_off.gif); 
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}

a#aboutrollover span { display:none; }

a#aboutrollover:hover { 
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
 

You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other.

Here's the navigation code :: Code:

<ul id="nav" name="nav">
<li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li>

<li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li>

<li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li>

<li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li>

<li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li>

<li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li>
</ul>

I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear.

Here is the site:: http://www.catskaraoke.com/index2.php

Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy.

thanks

I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes:

Code:

<style type="text/css">
  .container {
    display: inline-block;
  }

  .title {
    align: left;
  }

  .subtext {
    align: right;
  }
</style>

<div class="container">
  <div class="header">
    <div class="title">Title Goes Here</div>
    <div class="subtext">Align Me Right</div>
  </div>
  <div class="content">
    Variable content which container needs to size dynamically to fit.  Could be 300px wide, could be 500px wide...
  </div>
</div>

What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content
And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks!

I'm trying to display 5 images across, and underneath each image will be a caption.

So, i'm using an inline list, but how do I go about getting something to the second line for each list item, seems that inline-block works fine in IE, but since its not available for Firefox, what's the method people use here?

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.



Would appreciate any thoughts on the matter,

Cheers!

Is it possible mix inline and block-level elements directly together??

For example:

Code:

 <div....>

<input..... />    <-- inline element
<ul>...     <-- block element

</div>

Thank you

I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#wrapper{
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
width: 550px;
font-size: 12px;
line-height: 22px;
letter-spacing: 0.5px;
color: #666666;
}
#topimg {
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dotted #CCCCCC;
text-align:left;
display:block;
}
#secondimg {
margin: 0 0 0 20px;
text-align:left;
display:block;
}
#bodyimg{
padding: 20px 0px 20px 20px;
float:left;
display:block;
}

#listtable{
padding-top: 20px;
padding-bottom: 20px;
float:left;

font-size: 10px;
letter-spacing: 0.5px;
color: #891C46;
list-style-type: none;
line-height:18px;
}
#listtable li{
margin: 1px;
padding: 1px;
}

#listtable div {
margin: 1px;
padding: 1px;
background-color: #F7F7F7;
}
-->
</style>
<title>Carlton</title>
</head>

<body>



<div id="wrapper">

<div id="topimg">
<img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33">
</div>

<div id="secondimg">
<img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23">
</div>

<ul>
<li>Cinema Advertising is available in weekly blocks starting on Fridays.</li>
<li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li>
<li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30&rdquo; as a base: </li>


<div id="listtable">
<table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet">
<tr>
<td width="105">
<li>
<div>5&rdquo;</div>
</li>
<li>10&rdquo;</li>
<li>
<div>20&rdquo;</div>
</li>
<li>30&rdquo;</li>
<li>
<div>40&rdquo;</div>
</li>
<li>45&rdquo;</li>
<li>
<div>50&rdquo;</div>
</li>
<li>60&rdquo;</li>
<li>
<div>90&rdquo;</div>
</li>
</td>
<td width="95">
<li>
<div>.3&rdquo;</div>
</li>
<li>.5&rdquo;</li>
<li>
<div>.8&rdquo;</div>
</li>
<li>.1.00&rdquo;</li>
<li>
<div>.1.33&rdquo;</div>
</li>
<li>.1.50&rdquo;</li>
<li>
<div>.1.67&rdquo;</div>
</li>
<li>.2.00&rdquo;</li>
<li>
<div>.3.00&rdquo;</div>
</li>
</td>
</tr>
</table>
</div>

<div id="bodyimg">
<img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182">
</div>


<li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li>
<li>Lead times from booking to getting on screen are 3 weeks, although CSA&rsquo;s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li>
<li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li>

</ul>
</div>

</body>
</html>

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

IE5 doesn't support this (trying to apply padding-left to links).
Has anyone found a good workaround - Don't really want to put each one inside a DIV