CSS - How To Make Span Or Div Layout Items Horizontal ?

Hi

I'm struggeling with the following:

I have some span elements inside a td.

If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td).

Why does that happen and is there a way to make the td to autogrow to fit all the span's inside?

Se example code below

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;">
<tr>
<td style="background-color:gray; text-align:center; border:1px solid black;">
<span style="margin-right:20px;">First</span>
<span style="margin-right:20px;">1</span>
<span style="margin-right:20px;">2</span>
<span style="margin-right:20px; background-color:orange; padding:10px;">3</span>
<span style="margin-right:20px;">4</span>
<span style="margin-right:20px;">5</span>
<span style="">Last</span>
</td>
</tr>
</table>

******* UPDATE *******
I found this link today:
http://css-discuss.incutio.com/?page=FormattingContexts

which says (among other things):
*************************
Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.
*************************

So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above?
Is there any working workarounds for this...?

Hi,

I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik...



I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details.

REgards

Chad

hi

I am shifting to web 2.0 therefore learning a lot of things that I used to do with tables.

Now I have a task to make a form and also display text in parallel style e.g

Name User Name ------- Rating stars
Email User Email ------- Balance amount


to accomplish this in tables we might make two cells to hold Name, EMail in one and Rating and Balance in the second

then in each CELL further rows and cells for each entity e.g

Name User Name

how can we display this kinda info using pure CSS?

I found a website online http://www.compare-voip.net/viatalk.php there towards the bottom you can see how the email and rating stats are displayed in two columns, this is done with tables though I want to do the same with CSS only

thanks in advance

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

http://65.175.116.253/design/demo.html

The css is here

http://65.175.116.253/design/css.css

The entire package can be downloaded here

http://65.175.116.253/design/design.rar

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

http://65.175.116.253/design/demo.jpg

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

Here is the CSS



Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: right;
	width: 17em;
	margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

CSS newb here and this is my first full CSS page layout ever, so go easy.

Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page:

http://www.crackin.com/cbled/index.html

and here's the code:

Code:

body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}

.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}

#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}

#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}

#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}

#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}

#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}

#clear {clear:both;} 

-->
</style></head>

<body class="oneColFixCtr">

<div id="nonFooter">
  <div id="content">    
    
	<div id="mainlayout">
   	  <div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
	  <div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
	  <div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
	  <div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
	  <div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
	  <div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
	  <div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
      <div id="navbar">
        <div id="navbar-home"><a href="#">home&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-info"><a href="#">company info&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-link3"><a href="#">link3&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-link4"><a href="#">link4&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbarbreak"></div>
      </div>
      <div id="pagecontent" align="justify">
      
      <p>Lorem ipsum, etc etc...</p>
      
      </div>
    </div>
 
  </div>  
</div>

<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
  <div id="page-edges-b">
    <div id="mainbg-leftvert"></div>
    <div id="mainbg-rightvert"></div>
  </div>
</div>

<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
	  <div id="greenbreak"></div>
</div>

<!--FOOTER-->
<div id="footer">
  <div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
  <div id="footer-bg"></div>
  <div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
      
</body>
</html>

Any help is much appreciated.

I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  width: 100%;
}
table {
  border: 0px solid #000000;
  border-collapse: collapse;
  border-spacing: 0px;
}

#columnleft {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: left;
}
#columnright {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: right;
}
#footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
#clearfooter {
  clear: both;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%; 
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position:relative; */
}
#main {
  margin: 0px;
  padding: 0px;
  width: 79.8%;  /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #FFFFFF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
  float: left;
}
#wrapper {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* min-height: 80%; */  /* Might not be needed, it's an IE Hack... */
  background-color: #FF0000;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>

<body>
<div id="header">Header Text</div>
 <div id="wrapper">
  <div id="columnleft">Left Text</div>
  <div id="main">Center Content</div>
  <div id="columnright">Right Text</div>
 </div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html> 

Thanks,
FletchSOD

We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done.

Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one?

Simply put, instead of this way:
1 2 3 4 5
6 7 8 9

We want it this way:
6 7 8 9
1 2 3 4 5

As you understand this will look much better and not screw with our design;-)

Anybody?

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Hi,
Code:

<tr><td colspan="2" height="5"></td></tr>		
<tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr>

How do I imitate structure of the table above.

In the example below the text between <span> if too long ends up on new line below <label>
How do I make sure that it stay on right side?
Code:

<div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div>

Thank you.

Hi,

I am currently trying to produce a website using CSS style sheets.

I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags.

Can anyone suggest anyway round this?

Many thanks x

hi,

i have a chunk of dynamic text coming in. it can have html links in it. so something like:

'blah blah blah <a href="site">link text</a> blah blah'

im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to.

here's what i have:

PHP Code:
//the css class
.articleDesc
{
    font-family: verdana, arial, geneva, sans serif;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    color: #000000;
}

//trying to make all links red, doesn't work
a.articleDesc
{
    color: #FF0000;
}

//php
print '<span class="articleDesc">' . $dynText . '</span>'; 





the links just come out default, ie. blue and purple...

anyone know what's wrong here?

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

Hello,

Well this is a very simple question ... how can Iset the width of a span from CSS?

Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire.

I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place!

is there a way to set the span width without having to set thr float:left option?

thanks and regards,
Sim085

Why is this?

Code:

<div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'>
	<span style='color:#888888;font-weight:bold;font-size:10px;'>
		RECENT BLOGS
	</span>
</div>

different than this?

Code:

<div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'>
	<span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span>
</div>

Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical.