CSS - Div Inside Div Question

Hi I am trying to convert a site from HTML to one that relies more on CSS.

For the time being I need to position two div's inside a td one at 100% and the other centered with say 10px padding down each side.

The first one goes in ok but the second overflows the td cell I'm trying to put some padding on thus

Code:

<div style="position: relative; padding: 10"> 

But the div pops out of the td

Any ideas???

I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center.

Will someone please assist me in getting this centered?

EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div.

HMTL code
Code:

<div id="nav">
<div class="menu">
    <ul>
    <li><a class="hide" href="#">Top 1</a>
        <ul>
            <li>Sub Top 1.1</li>
            <li>Sub Top 1.2</li>
        </ul>
    </li>
    <li><a class="hide" href="#">Top 2</a>
        <ul>
            <li>Sub Top 2.1</li>
            <li>Sub Top 2.2</li>
        </ul>
    </li>
    </ul>
</div>
</div>

CSS code
Code:

#nav{background-color:Blue;height:35px;width:auto;text-align:center;}

/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

I need to style all images within a div. For example, I want to do something like this:
<div style="img{border: 0;}">
<img src="" />
<img src="" />
<img src="" />
</div>

But that does not seem to work. Is it this possible with css?
It is for an ebay template, so I don't think I can reference a separate stylesheet.

thanks.
Charley

I have a problem with positioning divs and here is the html code
Code:
HTML

<div id=wrapper>

<div id=header>
header contents
</div> <!-- end header -->

<div id=body>

<div id=profile>
<div id=avatar>
avatar data goes here
</div> <!-- end avatar -->
<div id=userdata>
user data goes here
</div> <!-- end userdata -->
</div> <!-- end profile -->

</div> <!-- end body -->
<div id=footer>
footer goes here
</div> <!-- end footer -->
</div> <!-- end wrapper -->

The problem is that the footer div is supposed to be below the body div but it is wrapped by the userdata div and i rellay sdo not kno why!

I will post the CSS in another post

Thanks

Hello all...

I need to have one of my div's of my layout contain two separate columns. My layout has 3 columns and in the center main content column I need to split it in half to display list items. Part of a sitemap.

I have this and it is not working. The boxes are working and in the proper horizontal alignment but they are not equal vertically. Ideas?

Code:

<div id="contentcenter">
		<div style="background-color: #006666; float:left; width: 185px; ">
		<p>testing</p>
		</div>
		<div style="background-color: #000000; margin-left: 189px; width: 185px; ">
		<p>testing</p>
		</div>				
	</div>

Thanks for taking the time to read my question.

I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible?

Here is what I have so far...

datacontainer is not growing when piccontainer grows.

HTML:
Code:

<body>
<div id="datacontainer">
	<div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div>
		Data</div>

</body>

CSS:
Code:

body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}

#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}

#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}

Hi,

This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page.


I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu.

I imagine there is a way to get two column layout ysing just DIVS. . .

I use my site for school, I'm a high school teacher & I teach some university coursework.

My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.)

sitenav : left hand nav_bar (for site-wide)
entry : min content
sidebar: Right hand sub_nav_bar (within this area)

-----------------

div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%;
font-size: 11px; background-color: white;
border: 1px solid red; z-index: 10;}
div#entry { color: #660; margin: 0 20% 1em; padding: 0 }
div#sidebar {position: absolute; top: 4em; right: 0; width: 20%;
font-size: 11px; z-index: 11;}

----------------------

http://www.mrplatts.com/pitt_tech/schedule.html


any help?

Thanks, Rich

I am trying to simulate a vertical table using divs and css, but I can't figure out how to center elements.

How do I center (horizontal and vertical) these 3 boxes inside the 3 frames?

Code:

<html>
<head>
	<style>
		.frame {
			width: 200px;
			height: 200px;
			border: 2px solid black;
		}
		.box1 {
			width:50px;
			height:50px;
			background-color: red;
		}
		.box2 {
			width:100px;
			height:100px;
			background-color: yellow;
		}
		.box3 {
			width:150px;
			height:150px;
			background-color: green;
		}

	</style>
</head>
<body>
	<div>
		<div class="frame">
			<div class="box1">Box 1</div>
		</div>
		<div class="frame">
			<div class="box2">Box 2</div>
		</div>
		<div class="frame">
			<div class="box3">Box 3</div>
		</div>
	</div>
</body>
</html>

Hi

I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet..

Kindly post ur suggestions to my email adddress
godwinsharmila@yahoo.com

Thanks in advance..

Regards
Sharmila

Hi All,

How can I enable the inside bordder of a TD in html.

Thans in advance

How do I make a div go to 100% height cross browser?

I have a layout like this:

----------HEADER-------------
NAVHOLDER
|
NAV(div inside holder)
|
NAV(div inside holder)
|
|
|
|
----------FOOTER-------------

cheers.

Hello!

Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read).

So the current html below would be shortened to:

Code:

<a href="javascript:void(0);" class="sddm"><u>Settings</u>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</a>

ORIGINAL CSS/HTML:

Code:

<style type="text/css">

/* Drop Down Menu */

span.sddm {
	z-index: 30;
	white-space: nowrap;
	position: relative;
}

span.sddm a {
	text-decoration: none;
}

span.sddm a:hover {
	text-decoration: none;
	color: blue;
}

span.sddm div {
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #3366cc;
	border-top: 1px solid #c9d7f1;
	border-left: 1px solid #c9d7f1;
	top: 18px;
}

span.sddm div a {
	position: relative;
	display: block;
	margin: 0px;
	padding: 2px 5px;
	width: auto;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

span.sddm div a:hover {
	background: #3366cc;
	color: #fff;
}

span.sddm .alignl {
	left: 0px;
}

span.sddm .alignr {
	right: 3px;
}

</style>

<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>

Is it possible to overide a websites default css when you display it in an iframe?

if so how is this done?

I have found the following javascript but it doesn't seem to do anything (maybe im using it incorrectly...)

Code:

	 
var cssLink = document.createElement("link")  cssLink.href = "test.css";  
cssLink .rel = "stylesheet";  cssLink .type = "text/css";  
frames['tbl'].document.body.appendChild(cssLink);

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Can I put my BAR in your FOO?</title>
<style type="text/css">
body
	{
	margin: 0px;
	padding: 0px;
	}
div#contents
	{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	border: 1px solid black; /* visual aid */
	}
div#thumbnails
	{
	border: 1px solid red; /* visual aid */
	}
div#thumb
	{
	float: left;
	}
</style>
</head>

<body>
<div id="contents">
  <div id="thumbnails">
    <div id="thumb"><img src="image1.jpg" /></div>
    <div id="thumb"><img src="image2.jpg" /></div>
    <div id="thumb"><img src="image3.jpg" /></div>
    <div id="thumb"><img src="image4.jpg" /></div>
  </div>
</div>
</body>

</html>

What I am trying to do is have the collection of "thumb" divs align in the center of the "contents". The number of "thumb"s will vary and I want them to fill the width of the screen no matter what width that may be, and change when the size of the window is changed. I realize that the float: left is pushing them to the left, but it's my understand that is how you get divs to appear side-by-side. So I figured I could enclose them in another div ("thumbnails") and then center it inside "contents", but "thumbnails" doesn't even seem to enclose the "thumb"s unless I specify a width, which I can't do because the number of thumbnails changes, and if I specify a width that is too big, the thumbs float back to the left and the extra containing div "thumbnails" is pointless.

So, how do I get the "thumb"s to be side-by-side and have that collection of "thumbnail"s centered on the page, while still keeping things liquid?

Currently working in IE6, but looking for support in IE5x, Opera, and Gecko based browsers.

I'm setting up a website order form, and using CSS for formatting.

I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament:

What it currently looks like

Picture 1


What I want it to look like

Picture 2


Structure of the DIV boxes

Picture 3



The code for the boxes is he
Code:

<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>

<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
	<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">

	<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">

	<TABLE class=dataFile border=0>
		<FORM name=module action=cart.php?action=confirm method=post>
 		<TBODY>
  		<TR class=listColor>
    		<TH>1:35</TH>
    		<TH class=listHighlight>AFV</TH>
    		<TH>AU$30.00</TH>
    		<TH align=right>QTY
				<INPUT type=textField size=3 value=1 name=qty> 
				<INPUT type=submit size=3 value="Add to Cart" name=submit> 
				<INPUT type=hidden size=3 value=t35064 name=id>
			</TH>
		</TR>
	</TBODY>
	</FORM>
	</TABLE>


	</DIV>

I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further)

Sample Page

Page Stylesheet



I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page!


I've been stumped for days on this, and it's delayed the page's launch.

If anyone can help me... it'd be very much appreciated.