Display: Block vs. Inline

**lindsaycb** · 02-28-2008, 09:51 PM

So I think I have a basic understand of how the display parameter works in CSS. However, I guess I'm not doing it right.

Here's my example: http://www.daily-chronicle.com/test2/
I have a main div and then a div for the article and a div for the photo. I have the main div set up a block, and the other two sub divs as inlines. One would think that it'd work but it doesn't.

Sometimes there won't be a photo, which is why I need the story to expand across the page when there isn't and not be in a specified width (as I had it before).

I've tried every combination out there too (no block div, only one inline div, etc). and I still haven't figured it out.

Got any suggestions?

**Nile** · 02-28-2008, 10:25 PM

Sorry, but I really don't know how you want it...

**lindsaycb** · 02-28-2008, 10:40 PM

So that the picture & the article are side by side but if there is no picture then the entire article stretches across like it does now.

**boogyman** · 02-29-2008, 04:30 PM

what coding language do you want this is? basically what you want is to determine whether the picture is present for the article and it it is then float the image to the right of the article, but until we know what language you would like to accomplish this in, we cannot help you. PHP/ASP/Javascript/.NET

**lindsaycb** · 02-29-2008, 04:33 PM

In CSS. I'm using it on a CMS site so if the image is not uploaded then it will not show up. I just want to be able to use the display code in CSS.

**boogyman** · 02-29-2008, 04:42 PM

you can use css regardless, but judging from your response I am going to assume that this is just a regular html/htm file, which means that you are hand coding all of the content into the page... so what you could do is assign a CSS class to the articles that have an image, and a general CSS style to the articles.

HTML Code:

<p>
     TEXT
     <img class="article" src="/path/to/image" width="" height="" alt="">
</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>
     TEXT
     <img class="article" src="/path/to/image" width="" height="" alt="">
</p>
<p>Text</p>

Code:

<style type="text/css">
p {
     width: 100%;
     clear: right;
}
img.article {
     float: right;
}
</style>

**lindsaycb** · 02-29-2008, 05:01 PM

OK, so here's my HTML code:

HTML Code:

Code:

<div class="topstory" style="height:210px;">
<div class="article">
  <span class="frontheadline">[story_component::1:headline-link]</span><br />
<span class="frontstory">[story_component::1:paragraphs:1:2]</span><br />
<br />
[story_component::1:more-link]</div>
<div class="photo">[story_component::1:image-thumbnail:300:image-photo-html]</div>
</div>

And here's my CSS code:

Code:

.topstory {margin:0; width:730px; background-image:url(http://www.daily-chronicle.com/art/images/breakout_bg_body.jpg); background-repeat:repeat-x; background-position:top left; /*display:block;*/}
.article {/*width:410px;*/ left:0; float: left; padding-right:6px; margin-right:6px; /*display:inline;*/}
.photo {/*width:300px;*/ float:right; /*display:inline;*/}

I tried it your way but it still put the image below the article instead of beside it.

**jscheuer1** · 02-29-2008, 05:22 PM

Code:

<!-- NewSys(TM), version 3.40.0, Copyright TownNews.com(C) 2002-2005, on web28.ch2.l3.sys.townnews.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<base href="http://www.daily-chronicle.com/" />

</head>

<body>

<div class="topstory" style="height:210px;">
<div class="article" style="float:left;width:600px;">
  <span class="frontheadline"><a href="/articles/2008/02/29/test2/news02.txt">Towing Toil </a></span><br />
<span class="frontstory">Tracey Falk couldn’t see the car. Falk was called during a January 1979 blizzard that hit the DeKalb County area with about 17 inches of snow — and that was on top of the nearly 15 inches already on the ground from past storms, according to the National Weather Service. A car was stuck on the side of Shabbona Road, on the north end of the village of Shabbona, he said.<br /><br />Falk, who has worked in towing for about 30 years, said he got out of his tow truck right where the caller said he would be — only there wasn’t a vehicle in sight, he said.</span>
<a href="/articles/2008/02/29/test2/news02.txt">More of this story</a></div>
<div class="photo"><script type="text/javascript" src="/shared-content/newsys/common/photo.js"></script><a href="javascript:thumbnailWindow('/articles/2008/02/29//test2//news02.img', 400, 243)"><img alt="Thumbnail" border="0" src="http://images.townnews.com/daily-chronicle.com/content/articles/2008/02/29//test2//news02_thumb.jpg"></a></div>
</div>


</body>
</html>

**lindsaycb** · 02-29-2008, 06:08 PM

I got it figured out. I just had to take out the left: 0 and float: left of the article CSS and it worked.

Thread: Display: Block vs. Inline

Thread Tools

Search Thread

Display: Block vs. Inline

Bookmarks

Bookmarks

Posting Permissions