2 Replies - 826 Views - Last Post: 12 April 2010 - 09:55 AM

#1 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

nesting divs

Posted 10 April 2010 - 03:37 AM

hi

I'm struggling a bit with some nested divs, here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<title></title>
<style type="text/css">


body {
	margin:50px 0px; padding:0px;
	text-align:center;
	}

	#header ul {
		clear:left;
		width:90%;
		margin: 0 auto;
		list-style:none;
		padding-top:100px;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	
	.colmask {
		clear:both;
		width:80%;			/* width of whole page */
		margin: 0px auto;

		overflow:hidden;		/* This chops off any overhanging divs */
		border: 1px solid;
		border-color:green;
	}
	
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}

	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}

	.threecol .col1 {
		width:32%;			/* width of center column content (column width minus padding on either side) */
	padding-left:20px;
	}
	.threecol .col2 {
		width:32%;			/* Width of left column content (column width minus padding on either side) */
	}
	.threecol .col3 {
		width:32%;
background-color:red;		/* 
	}
	
	#x {
		width:40%;			/* width of whole page */
	}
</style>

</head>
<body>

<div id="header">
	<ul>
		<li><a href=""#><span>Voyager avec</span></a></li>
		<li><a href="#"><span>Destination</span></a></li>
		<li><a href="#"><span>Processus de reservation</span></a></li>
		<li><a href="#"><span>Fidelite recompensee</span></a></li>

		<li><a href="#"><span>Bookings de A a Z</span></a></li>
		<li><a href="#"><span>Environment</span></a></li>
		<li><a href="#" class="active"><span>Boute a outils</span></a></li>
	</ul>


</div>
<div class="colmask threecol">

	<div class="colmid">
		<div class="colleft">

			<div class="col1">
				<!-- Column 1 start -->
				<h2>Here is my left content</h2>
				<!-- Column 1 end -->
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<h2>Main Content</h2>
				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
				<h2>Right Column</h2>
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>






</body>
</html>





I want a 2-column on top with 3 equally spaced cols directly underneath.... :dontgetit:

Ive tried:


<div class="colmask threecol">

	
<div id="x">two cols at the top</div><div>here is another</div>

<div class="colmid">



and


<div class="colmid">
<div id="x">two cols at the top</div><div>here is another</div>
<div class="colleft">




even


<div class="colleft">

<div id="x">two cols at the top</div><div>here is another</div>
			<div class="col1">






but no joy... I'm missing some css me thinks :rolleyes:


help please

skip that, i'm making some progress me thinks. God i hate layout technologies... :whatsthat:

This post has been edited by 1cookie: 10 April 2010 - 08:19 AM


Is This A Good Question/Topic? 0
  • +

Replies To: nesting divs

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: nesting divs

Posted 12 April 2010 - 08:14 AM

So do you need help or not?

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

Re: nesting divs

Posted 12 April 2010 - 09:55 AM

View Postgregwhitworth, on 12 April 2010 - 07:14 AM, said:

So do you need help or not?

--

Greg



I should be alright Greg, thankyou.. :bigsmile:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1