CSS - Giving An Anchor Tag A Width In Css

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen.

The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content.

Is there a way to get this effect?

I need help with my navigation menu... The problem is that I want the div container to be gray, but the white navigation links have gray bleeding below and to the right of each link. It also screws up any border I try to put between the navigation menu and anything else below it.

Here is the markup:

<div id="container">
<div id="header">
<h2>Test Header</h2>
</div>
<div id="left_column">
<ul>
<li class="main_nav"><a href="#">Link 1</a></li>
<li class="main_nav"><a href="#">Link 2</a></li>
<li class="submain_nav"><a href="#">Sublink 1</a></li>
<li class="submain_nav"><a href="#">Sublink 2</a></li>
</ul>
<p class="p_left_column">This stuff goes below the main navigation menu.</p>
</div>
<div id="main_column">
<h2>A test heading.</h2>
<p>A test paragraph.</p>
</div>
<div id="footer">
Test footer
</div>
</div>

And here is the style sheet for div left column:

#left_column {
float: left;
width: 160px;
margin: 0;
padding: 0;
line-height: 130%;
}

#left_column ul {
padding: 0;
margin: 0;
list-style: none;
}

li.main_nav, li.submain_nav {
text-align: left;
width: 100%;
display: block;
/*border-bottom: 1px solid #aaa;*/
}

li.submain_nav { line-height: 110%; }

li.main_nav a {
padding: 5px 0 5px 8px;
display: block;
color: #0380B7;
font-size: 16px;
background: #fff;
text-decoration: none;
}

li.main_nav a:hover, li.submain_nav a:hover, li.main_nav a.active:hover, li.submain_nav a.active:hover {
background: url(./images/right_arrow.gif) left no-repeat #eee;
color: #00F;
}

li.submain_nav a {
padding: 0 0 1px 20px;
display: block;
color: #0380B7;
font-size: 13px;
background: #fff;
text-decoration: none;
}

li.main_nav a.active, li.submain_nav a.active {
background: url(./images/right_arrow.gif) left no-repeat #fff;
color: #00F;
}

p.p_left_column {
font-size: 13px;
line-height: 130%;
font-family: arial, helvetica, sans-serif;
border-top: 1px solid #aaa;
padding: 5px;
color: #000;
}

p.p_left_column a {
border-bottom: 1px dashed #99CF16;
text-decoration: none;
color: #0380B7;
}

p.p_left_column a:hover {
border-bottom: 1px solid #00f;
color: #00f;
}

Any help would be greatly appreciated. Thanks for reading.

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere.

glockpartsrus.com/products.php?cat=46 for an example.

Hi

I have a master page in my .net project that has a template. In this template it has a line for all links

a:link { color......}

So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out.

How can I stop this from being crossed out?

Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't

Code:

.contenthead {
	background-image: url(player/images/player_03.gif);
	background-repeat: repeat;
	height: 50px;
	color: #000000;
	font-weight: bold;
	font-size: 40px;
}

The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ

The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen?

please click here to read my message.

My code:
Code:

#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}

#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}

EDIT

Never mind, fixed it myself eventually.

Hi All,

I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas?

I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs.

I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems!

Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O )

Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE.

I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is:

Code:

body {
 background: #EFF7FF url(bg.gif);
 text-align:center;
 padding:0;
 }

#outer {
 border:5px double #234B77;
 width:650px;
 padding:0px;
 margin:0px;
 }

#hdr {
 width:650px;
 height:151px;
 background: #21558C;
 }

#bar {
 width: 650px;
 height:90px;
 background: #ADD7EF url(rainbowsitedesign_2x1.gif);
 border:solid #000000;	
 border-width:0px;
 padding-top: 37px;
 text-align:left;
 }

#bodyblock {
 position:relative;
 background: #ADD7EF url(backgroundforsite.gif);
 width:650px;
 padding:0;
 }

#l-col {
 float:left;
 background: #ffffff url(white.gif);
 color: #333333;
 width:140px;
 border-left: 1px solid #234B77;
 border-right: 1px solid #234B77;
 border-top: 1px solid #234B77;
 border-bottom: 1px solid #234B77;
 margin-top:10px;
 margin-bottom:10px;
 margin-left:5px;
 margin-right:5px;
 }

#coltop {
 height: 42px;
 background: #3971B5 url(tabletop.gif);
 color: #000;
 text-align: center;
 padding:10px;
 font-size: 105%; 
 font-weight: bold;
 color:#1A3958;
 }
 
 #cont {
 width:485px;
 background: #ffffff url(white.gif);
 border-left:1px solid #234B77;
 border-right:1px solid #234B77;
 border-top:1px solid #234B77;
 border-bottom:1px solid #234B77;
 text-align:left;
 margin-top:10px;
 margin-bottom:10px;
 margin-right:5px;
 font-size: 100%; 
 font-weight: normal;
 color:#1A3958;
 }
 
#contentop {
 width:485px;
 height:42px;
 background: #3971B5 url(tabletop.gif);
 color: #333333;
 border-left:0px solid #234B77;
 border-right:0px solid #234B77;
 border-top:0px solid #234B77;
 border-bottom:1px solid #234B77;
 margin:0px;
 text-align: center;
 padding:10px;
 font-size: 105%; 
 font-weight: bold;
 color:#1A3958;
 }
 
#ftr {
 width:650px;
 height:25px;
 background:#346EB4;
 color: #333333;
 border: 0px solid #000000;
 margin:0;
 }
 
#ftr2 {
 width:650px;
 height:25px;
 background:#346EB4;
 border: 0px solid #000000;
 margin:0;
 }
#ftr3 {
 width:650px;
 height:99px;
 background: #346EB4 url(websitedesign.gif);
 border: 0px solid #000000;
 margin:0;
 padding-top: 20px;
 }
#home {
 width:50px;
 height:10px;
 border: 1px solid #000000;
 margin:0;
 }
p:first-letter {
 font-size: 120%; 
 font-weight: bold;
 }
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }

a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }

a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }

a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }

a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }

a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }

#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }

Here are the two pages:

With doctype:
http://rainbowsitedesign.com/withdoctype.html

Without it:
http://rainbowsitedesign.com/nodoctype.html

How can I fix both my browser problems and my doctype problems? Any help is app!

Hi all,
I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified.

How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments.

Thanks in Advance.

- John

I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6.

Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further.

Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 
</head>
  <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
      <form id="frmMain" runat="server"> 
          <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">        
                      <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
                  <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                  </div> 
          </div>
      </form>
  </body>
</html>