[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

impossible css question!?!? elements outside a centered container.

Posted on 2007-07-25
3
Medium Priority
?
289 Views
Last Modified: 2012-06-21
hi experts

i have a horrible feeling this isn't possible, but...

i have a design where the page is centered in the browser window. i have a left hand column in this page that contains headers. each of these headers has a bottom border. all of what i've just said is as easy as easy can be. now comes the hard bit...

i want that border to continue to the left for infinity. in other words, no matter how big your browser window, the border of that header will always start at the left hand side of your window, and continue up to the page, under the header text, and terminate at the end of the left column (that contains the heading).

i managed to do this within minutes, getting it to work exactly right in firefox and ie7, BUT it doesn't work in ie6. i guess i can see why, as - obviously - to the center the site correctly, i have an outer container with a fixed width and left and right margins set to auto, so there is an argument to say anything to the left or right of this container (the border in other words) wouldn't be seen, but firefox and ie7 disagree.

anyone have any ideas? i really don't think it's possible, so prove me wrong! you can see my test page here:

http://www.oneplayer.co.uk/dump/test.html

thanks in advance
0
Comment
Question by:geordie007
3 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 19564792
how about this:

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

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>

body { background-color: #f00; }

#outer { width:968px; background-color:#ccc; margin:0 auto; }

#inner { width:577px; background-color:#fff; }

.section-header { float:left; width:120px; margin-right:28px; position:relative;}

.section-clients[class] { float:left; margin-left:130px;} /* firefox only */
* html .section-clients { float:left;} /* ie6 only */

.clear { clear:both; height:1px; width:1px; visibility:hidden; font-size:0; }

h2 { border-bottom:solid 1px #000; text-align: right; font-size: 1em; position:absolute; right:0; top:0; width:999em}
.head2[class]{position:absolute;top:-15px;}/*firefox only*/

h3 { margin: 0; font-size: 1em; }

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


</style>

</head>
<body>


<div id="outer">
      
      <div id="inner">
      
            <div class="section">

            
                  <div class="section-header">
                        <h2 class="head2">Heading</h2>
                  </div>
                  
                  <div class="section-clients">
                        <h3>Sub Heading</h3>
                        <ul>
                              <li>List Item</li>

                              <li>List Item</li>
                              <li>List Item</li>
                        </ul>
                  </div>
            
                  <div class="clear">&nbsp;</div>
                  
            </div>
      
      </div>

</div>

</body>
</html>

0
 
LVL 7

Author Comment

by:geordie007
ID: 19564978

VirusMinus, thanks, but a couple of things:

- my fault, i should have said that i don't use hacks or filters
- it doesn't work - as it should - in ie7

bloody close tho, and the hacks thing was my fault, so if no one else can give it a go the points are yours anyways
0
 
LVL 1

Accepted Solution

by:
hurrikanesolutions earned 1500 total points
ID: 19586194
How about this and no hacks either!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8" ?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
body { background-color: #f00; }
#outer { width:150px; background-color:#ccc; margin:0 auto; }
#inner { width:250px; background-color:#fff; }
.section-header { float:left; width:120px; margin-right:28px; }
.section-clients { float:left; }
.clear { clear:both; height:1px; width:1px; visibility:hidden; font-size:0; }
h2 { margin:0 0 0 -9999px; padding: 0px; text-align: right; font-size: 1em; }
.section-header div{
margin-top: -1px;
border-bottom:solid 1px yellow;
width: 1000px;
position: relative;
margin-left: -1000px;
float: right;
}
h3 { margin: 0; font-size: 1em; }
ul { margin: 0; padding: 0; list-style: none; }</style>
<div id="outer"><div id="inner"><div class="section"><div class="section-header">
<div><h2>Heading</h2></div>
</div>
<div class="section-clients">
<h3>Sub Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div><div class="clear">&nbsp;</div>
</div></div>
</div>
</body>
</html>
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month19 days, 3 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question