Positioning Woes

[jem122974]

I have divs setup basically as follows:

		<div id="TicketManager" class="application">
	
			<div class="header">
				<div class="logo"></div>
				<div class="spacer"></div>
				<h2 class="letterhead">Ticketing System</h2>

				<div class="specialLogo"></div>
				<div id="Navigation" class="navigation">
					<ul class="items">
						<li class="item lnkCreateTicket">Create Ticket</li>
						<li class="item lnkViewTickets">View Tickets</li>
					</ul>
				</div>
				<div class="content">

				</div>
			</div>

			<div class="modules">
	
	<div id="TicketsViewer" class="module">
		<div class="navigation">
			<ul class="items">
				<li class="item lnkOpenTickets">Pending Tickets</li>
				<li class="item lnkClosedTickets">Completed Tickets</li>

			</ul>
		</div>
		<div class="content gridView">
			<div class="header">
				<span class="label">Id</span>
				<span class="label sortable">Truck</span>
				<span class="label sortable">Trailer</span>

				<span class="label">Options</span>
			</div>
	<div class="dataRow">
		<span class="data id">12</span>
		<span class="data truck">SomeTruck1</span>
		<span class="data trailer">SomeTrailer1</span>
		<span class="data options">

			<span class="option">Update</span>
			<span class="option">Close</span>
		</span>
	</div>
	<div class="dataRow">
		<span class="data id">15</span>
		<span class="data truck">SomeTruck3</span>

		<span class="data trailer">SomeTrailer3</span>
		<span class="data options">
			<span class="option">Update</span>
			<span class="option">Close</span>
		</span>
	</div>
	<div class="dataRow">

		<span class="data id">77</span>
		<span class="data truck">SomeTruck6</span>
		<span class="data trailer">SomeTrailer6</span>
		<span class="data options">
			<span class="option">Update</span>
			<span class="option">Close</span>

		</span>
	</div>
		</div>

	</div>

Now in my CSS I have application set with a border. I want this around the complete application. This is also specified as position:relative with top:5px; Now when I position my header with position:relative and the divs inside of that with position:absolute they go where I expect. But as soon as I try to position the modules it overflows the border of the application. How can I get the application box to grow so it always includes the interior boxes? I tried relative, absolute, different displays and even float and clear, but I guess I just don't understand. At this point good ole tables seem a lot simpler.

.application { 
	border:2px; border-color:#C1D72F; border-style:solid; padding:1px; text-align:left; margin:5px; 
	position:relative; width:975px; top:5px; font-size:.9em; background-color: white; display:block;
}

/* Header */
#TicketManager>.header { position:relative; margin:5px; background-image:url('../images/interface/fillerGreen.gif'); background-repeat:repeat; width:965px; height:81px; }
#TicketManager .header>.logo { position:absolute; left:0px; width:273px; height:81px; background-image:url('../images/interface/logoEJIW.gif'); }
#TicketManager .header>.spacer { position:absolute; left:279px; height:81px; z-index:1; }
#TicketManager .header>.letterhead { position:absolute; top:20px; left:340px; z-index:1;}
#TicketManager .header>.specialLogo { position:absolute; right:5px; width:90px; height:76px; background-image:url('../images/interface/logo125Years.gif'); }

/* Modules */
#TicketManager .modules {
	top:90px;
}

 

[Vragabond]

As long as you do not take the elements out of document flow (which is what absolute positioning does) or change their natural flow (which is what float or displaced relative positioning do), the parent container will grow with the content of its children. You can combat the float issues by clearing floats after the floated elements (with one of the clearing techniques) or giving your container overflow property (hidden or auto). Other methods you cannot really accomplish the return to normal flow so I would suggest you change the code to use floats.

In addition to it all, I must say that your code looks extremely complex and convoluted. If you show us what you want to do, I am sure there are easier ways to do it.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jem122974]

This is what I want.

1) A container div that has a border
2) Within this a header div that contains a logo to the left, a spacer image which is a bar, then a title, and to the left another logo
3) Directly below this some tabs for navigating between modules
4) Then below this this a data grid with its own set of navigation links.

My goal is to make it look similar to the layout of

http://www.ejiw.com.

Are you suggesting I use floats instead of position:relative and position:absolute?

Thanks,
Jon

 

[ChrisHunt]

good ole tables seem a lot simpler

"Good ole tables" remain entirely appropriate to those applications for which they were intended - tables of data. Your [tt]<div class="gridview">[/tt] looks like a misguided attempt to brew your own <table> element with a plethora of <div>s and <span>s.

Top Tip: If your markup has a multitude of <div>s and <span>s surrounding every bit of content, and each has its own class and/or id, you're probably doing something wrong.

The same's true of positioning - if you're doing it to everything, you're doing too much.

Like Vrag, I'm struggling to understand the effect you're trying to achieve from your current convoluted markup.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jem122974]

Well, you both confirmed my thoughts. I simply don't understand CSS... So I'm going to tell my boss that I quit. Thanks for clarifying.