Re: [css-d] I've died and gone to CSS hell
Thanks to all who responded.
I borrowed bits and pieces, played with values here and there, and have a
workable solution. Not beautiful, but it does work. I've made peace with that ;)
/** BODY LAYOUT */
#outer_wrapper {
position:relative;
width: 1000px;
margin: 0 auto;
text-align:left;
}
#header {
padding:0px;
margin:0px;
width:100%;
clear:both;
}
#navigation {
top: 90px;
left: 0;
position:absolute;
width:250px;
}
#content {
width:745px;
margin: 0 0 0 260px;
position:relative;
}
#logo a:hover {
background-color:transparent;
}
#footer {
text-align: right;
clear: both;
float:right;
}
/*^^ BODY LAYOUT */
If you want to see it in action, the account is still enabled:
www.foloup.com
username: css
password: mobydick
Thanks again guys! I really appreciate it!
John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
*From: John Wells
*Sent: Friday, April 27, 2007 5:12 PM
*
*Don't know if your remember this or not, but back some time ago I
emailed about a three-
*column layout that was killing me. A helpful soul suggested using
display:table-cell to fix my
*problem, and it did!...except, not really in IE.
*
John, I have a centered, 3-column percentage layout that works pretty
well at www.opactive.com, without negative margins:
#container {
width: 98%;
border: 1px solid #5269AD;
padding: 0;
margin: 1em auto 0 auto;
}
#column1 {
float:left; width:18%; margin-top:.5em; margin-left:1%; padding:
0;
}
#column2 {
float:left; margin-left:1%; padding:0; width:60%;
margin-top:.5em; padding: 0;
}
#column3 {
float: left;
width: 18%;
margin-top:.5em;
margin-left:1%;
padding: 0;
}
Hope this helps!
Teressa
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
On Sat, 28 Apr 2007 00:12:08 + (UTC), John Wells wrote:
So, I have essentially five key divs, that go like this:
div id=outer_wrapper
div id=header/div
div id=navigation/div
div id=content/div
div id=footer/div
/div
I've been through various incarnations of css layout so far...the latest is
here:
#header {
padding:0px;
margin:0px;
width:80%;
clear:both;
}
#navigation {
width:20%;
float:left;
margin-right:5%; /* == suggestion: delete this declaration */
}
[...]
John,
Suggestion: take out the margin-right on the #navigation.
A min-width on the #outer-wrapper may help, too.
(But not in IE 7).
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] I've died and gone to CSS hell
Guys,
Don't know if your remember this or not, but back some time ago I emailed about
a three-column layout that was killing me. A helpful soul suggested using
display:table-cell to fix my problem, and it did!...except, not really in IE.
So, I finally relented. I gave up. I admitted defeat. I cried for awhile. Then,
I picked myself up...looking forward to the certain simplicity a two column
layout was sure to bring. I mean, three is hard...but two? Come on...we should
all be able to do THAT in our sleep.
Wrong...wrong for me anyway. I must be css-layout challenged.
So, I have essentially five key divs, that go like this:
div id=outer_wrapper
div id=header/div
div id=navigation/div
div id=content/div
div id=footer/div
/div
I've been through various incarnations of css layout so far...the latest is
here:
#header {
padding:0px;
margin:0px;
width:80%;
clear:both;
}
#navigation {
width:20%;
float:left;
margin-right:5%;
}
#content {
float:right;
width:75%;
}
#footer {
text-align: left;
clear: both;
}
As you can see, pretty simple. And it works wellthat is, until the window
shrinks so that there's not enough space to display both divs. Then, the
ugliness begins. In firefox, it's less ugly but still ugly...the content div
overlays the navigation div. Not the behavior I want. In IE, it's even
nastier...the content div simply drops below the navigation div...you can't
even see it anymore unless you scroll WAY down. What I wish would happen is
that scroll bars are display in the browser window...and that the divs would
shrink just to the point that they almost touch but don't overlap.
I've tried various ways to fix this...and it appears giving outer_wrapper a
width works in Firefox. But, it doesn't in IE.
I'm so defeatedI need help.
Would anyone care to login to my app and take a look? Here's the info:
http://www.foloup.com
username: css
password: mobydick
I would really, really appreciate any guidance you can provide.
Thank you!
John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
On 4/28/07, John Wells [EMAIL PROTECTED] wrote:
I'm so defeatedI need help.
Have you tried using absolute positioning? Floats have a nasty habit
of breaking in IE.
Something like this:
div id=header/div
div id=container
div id=nav/div
div id=content/div
/div
div id=footer/div
#container {
position: relative; // position hook for #nav
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 25%;
}
#content {
padding-left: 25%; // width of #nav
}
--
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
John Wells wrote: Guys, Don't know if your remember this or not, but back some time ago I emailed about a three-column layout that was killing me. A helpful soul suggested using display:table-cell to fix my problem, and it did!...except, not really in IE. So, I finally relented. I gave up. I admitted defeat. I cried for awhile. Then, I picked myself up...looking forward to the certain simplicity a two column layout was sure to bring. I mean, three is hard...but two? Come on...we should all be able to do THAT in our sleep. Wrong...wrong for me anyway. I must be css-layout challenged. I sympathise. Having just gone through the same process, I can definitely sympathise. Personally I found that there is so much information out there, that it is very difficult to pick a design. If you want to have a look at some layouts that may work, I suggest you have a look at some of the following links. For your site, a fixed layout might be best. If you want the design to adapt to the width of the browser, have a look at the fluid layouts. The major differences is that fixed layouts are sized using pixels or ems and fluid layouts are sized using percentages. First, there is a page in the CSS Discuss wiki: http://css-discuss.incutio.com/?page=ThreeColumnLayouts Even though this is for 3 column layouts, most can be made into 2 columns fairly easily. In this list, some of the more active and recognised sites are Position is Everything, Holly 'n John or Holly Bergevin, Alex Robinson and Thierry Koblentz. That's not to say the others aren't as good, these are just starting points to try to filter things for you a little bit. I actually wound up adapting Paul O'Brien's work. There's also Bruno Fassino's site, which I didn't see listed: http://www.brunildo.org/test/ One thing that you may like is the improved Piefecta page maker http://www.positioniseverything.net/articles/pie-maker/pagemaker_2_9_home.html by ClevaTreva. There's a link to this from Position is Everything http://www.positioniseverything.net/. In terms of your layout, one thing I notice right-off-the-bat is that I don't think your widths add up. You have to remember that in the box model, the width is only the width of the content. On to that you have to add margins and padding. You have the header at 80% and the navigation at 20% with a 5% margin. So I think your header needs to be 75% - if you want the navigation to run up alongside the header. Lastly, I don't think you have enough divisions to contain everything - sorry! Sorry I can't help you more with your layout. Others on the list may be able to do that. Lori __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
- Chief Technology Officer [EMAIL PROTECTED] wrote: I ran into this numerous times. It may not be the best solution, but it worksd for me. Your navigation is 20% with right margin of 5% and the Content is 75% = 100%. Try using 73 or 74% for width. Chief, Unfortunately, no dice. Still breaks in both FF and IE as described :(. Thanks for trying though...I think it may be complicated by the fact that #content contains a table. John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
- Blake Haswell [EMAIL PROTECTED] wrote: Have you tried using absolute positioning? Floats have a nasty habit of breaking in IE. Blake, Seems to prevent pushing the #content div below the #navigation div, but it still allows overlap. Anyway to get around this? Thanks! John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
On 4/28/07, John Wells [EMAIL PROTECTED] wrote: Blake, Seems to prevent pushing the #content div below the #navigation div, but it still allows overlap. Anyway to get around this? Umm... Try word-wrap: break-word; ... It's not supported in Firefox yet, but I think it's supported in IE and in Safari. I haven't done any testing with it, though, so your mileage may vary. Other than that, maybe you could throw overflow: auto; on the #content div, but it's not exactly pretty. -- Australian Web Designer - http://www.blakehaswell.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
John Wells wrote: Don't know if your remember this or not, but back some time ago I emailed about a three-column layout that was killing me. A helpful soul suggested using display:table-cell to fix my problem, and it did!...except, not really in IE. So, I finally relented. I gave up. I admitted defeat. I cried for awhile. Then, I picked myself up...looking forward to the certain simplicity a two column layout was sure to bring. I mean, three is hard...but two? Come on...we should all be able to do THAT in our sleep. Wrong...wrong for me anyway. I must be css-layout challenged. You can find good working layouts at Layout Gala: http://blog.html.it/layoutgala/ -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
