/    Sign up×
Community /Pin to ProfileBookmark

assistance with width: auto; problem

Copy linkTweet thisAlerts:
Sep 01.2008

Good day all;

I have been fighting this problem for a month and must be missing something stupid but I can’t see it.

My desktop has a res of 1280×1050 and my page (originally with a left and right sidebar [kind if a 3 column layout w/header and footer]) had a large white-space in the #content div because I had a width:600px; The reason is not everyone has a big screen. I volunteer at a hospital and when viewed there the #content div was being pushed down (like a float was not on the left and right sidebars. Setting the fixed width to the 600 fixed this on most pages (not all though) [this monitor is 1024×768 – crappy res as the size onf the monitor is as big as my desktop’s]. now my laptop is somewhere in the middle and the #content div was not pushed down.

My sidebars had to be fixed at 200px so that my menu would not be chopped off. I had tryed width:auto; on the content div and it pushed that down below the sidebars in all sizes, I tried width;49% which made the crappy res screen look right on most pages, and my laptop had a little white-space and on my desktop..a ravine on the right between content and right sidebar.

So I consolidated by right sidebar into the left (which actually looks better to me anyway) removed the #right styles. then I added min-width:600px; and max-width:1150px;

On my desktop the #content now fills the page, but if I resize to crappy res screen it pushed the #content div down below the sidebar.

Can someone please tell be why the width will not adjust to fill the space properly>

page link – [url=http://www.mainenotarynet.com]Maine Notary Net Home Page[/url]

my css page – [url=http://www.mainenotarynet.com/css/mainestyle.css]Style Sheet[/url]

Any help is greatly appreciated
Thank You

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@mainenotarynetauthorSep 01.2008 — Update --

I am now on crappy res monitor and looked at my site. The #content does stretch across to the other side but then looking at my laptop (side-by-side) there is a huge canyon on the right (crappy res = 1024x768 and laptop res = 1280x800)

still need to figure out why.. but then I looked at the same page on IE7 on laptop and it shows as the same as crappy res monitor (which is what I want).

So now the question would be why does the min-width and max-width work in IE7 but not FF3. Is there an equivalent way for netscape/mozilla browsers so no matter which a visitor uses it looks the same?

Thanks again
Copy linkTweet thisAlerts:
@WebJoelSep 01.2008 — It looks to me as if "#content" needs to "float:left;" to stay against the left-hand column, and if this "#content" is "width:auto;", there needs to be a 'wrapper' or 'container' DIV that is 'fixed width', say, "width:98%;".

I'm using SeaMonkey ("Mozilla") today and cannot test your code but I'll switch over to Firefox shortly and see how it validates, and otherwise works. But right now, you have a massive 'hole' to the right of the left-hand column where the "#content" drops below...
Copy linkTweet thisAlerts:
@mainenotarynetauthorSep 01.2008 — Hi WebJoel;

That 'Hole' IS the problem. I have tried teh wrapper thing befor and never worked.depending on screen size that hole appears.

look forward to your response.

btw - validation in FF3 shows no errors since I finally figured out how to sub <object> from <embed> which was creating 6 errors. [Fixed that]

Have a great day
Copy linkTweet thisAlerts:
@WebJoelSep 01.2008 — ....

<body>

....

[B]<div [COLOR="Red"]style="width:98%;"[/COLOR]><!-- this is a WRAPPER container -->

<!-- Insert Left Sidebar Info Here -->

<div id="leftcol" [COLOR="Red"]style="position:absolute; left:30px; top:200px;[/COLOR]">[/B]

....

<!-- End the Google Div Script - (Starts as open but remembers a persist[B][U]a[/U][/B]nt state also) -->

<!-- the correct spelling is "persist[B][U][COLOR="Red"]e[/COLOR][/U][/B]nt" -->


<!-- End Yahoo Groups -->

</div>

<!-- Ends Left Col Div -->

<!-- Place contents of page here -->

[B]

<div id="content" [COLOR="Red"]style="margin:10px 30px 100px 250px; padding-bottom:30px; width:auto; border-bottom:1px solid purple;"[/COLOR]>[/B]

<p>This site is a one stop shop to find notaries public in Maine for your mobile signing agent and wedding ceremony needs.</p>

....

(content text here)

....


....

<!-- Ends content Div -->

</div>

[B][COLOR="Red"]</div><!-- end WRAPPER container -->[/COLOR][/B]

<!-- End Main Content Section -->

....

[B]

[B][COLOR="Red"]<!--[/COLOR][/B] <hr class="sectionbreak" /><hr /> [B][COLOR="Red"]-->[/COLOR][/B] <!-- unsemantic, deprecated and useless "horizontal ruler" can be removed here and use a "border-bottom" on "#content" (done) -->

<div id="footer" [COLOR="Red"]style="margin-top:30px;"[/COLOR]>[/B]

....
[/QUOTE] I'm back (got called away for a few hours) -Using the [B][COLOR="Red"]changes[/COLOR][/B] noted here, this works now. I will provide the un-edited file as attached ZIP as this whole thing will not fit on this post.

Using "position:absolute;" on the left-column and margin-left:foo/width:auto on "#content and a WRAPPER of 98% width, we achieve some semblance of 'fluid design'. The top navigation bar is of course, static (fixed) width still.

But this now looks/works the same for IE7/Firefox (no 'hole'.) This was fairly easy to achieve, -I think I logged maybe 10-minutes fixing this once I understood the layout. And what a pleasure it is to work on 'validating' code even though there are a few 'deprecated' things I would like to change and I could condense this HTML code about about 25% or more. ?

Nice work. ? (note that on the ZIP file I have your external files referenced [I]absolute-path[/I] now. This was so that I could work on it from my desktop.)

[upl-file uuid=f21482bd-9a6b-40b2-9a20-2a97fac97625 size=10kB]maine.zip[/upl-file]
Copy linkTweet thisAlerts:
@mainenotarynetauthorSep 02.2008 — Thanks WebJoel for your reply but...

Why would I put styles in the page itself -- that is what CSS is for. Absolute won't work, as pixels on the monitors would not be the same size and make things worse. (I've tried that in the past)

An <hr> as a #content bottom border doesn't work as if content is shorter than sidebar it looks awful. and the <hr /> is still validating so not depreciated. I have been working on this site (my own) for several months, but the fluid contents div doesn't work in firefox only as my update said I looked on crappy res monitor and the contents were not pushed down now I just have to check all pages next on the same monitor. but since CSS is supposedly used to make all pages uniform then...

Thanks for the input thoug -- maybe I can adapt it but I found before absolute positioning does strange things at times and your comment of "the #leftcol should be float:left; well if you looked at my CSS you would see that it was.

Any other suggestion appreciated from all.

Thank you and have a nice day
Copy linkTweet thisAlerts:
@mainenotarynetauthorSep 03.2008 — Update -- WebJoel;

I did what you said and it created more problems. all your suggestions were added to the css file so all pages could benefit (my pages are php and use includes to create the html you see as source code.

[url="http://www.mainenotarynet.com/css/mainestyle.css"]CSS file[/url]

[url="http://www.mainenotarynet.com/includes/"]All the include files[/url]

my skeleton is used to just have to add the content (I can't attatch it because php is not allowed here)

absolute position on leftcol is fine but the heights of leftcol and content not being the same is so screwed up now I can't seem to fix it - I tried wrapper height 100% with both the leftcol and content set at 95% -- no luck

take a look at the page now and you will see what I mean

[url="http://www.mainenotarynet.com"]Screwed up looking page[/url] you will have to scroll down the page to see the puke effects.

I had the wrapper div there but I took it out - the same thing is there with or without it so it is stupid to have it there.

Any other help appreciated

Thank You
Copy linkTweet thisAlerts:
@mainenotarynetauthorSep 03.2008 — Another update -- almost resolved but one problem persists:

Look at my [url="http://www.mainenotarynet.com/****act_us.php"]Contact Us page[/url], the tables seem to be on the left and the entire #content section and the table tags have text-align:center and do do my h2 headings for some reason with the width auto set to auto it thinks the #content div is basically as wide as the widest table. Any way to fix this.

WebJoel -- Beleive it or not you were a large help. I just needed a push in the right direction. the puke screw up was fixed by calculating the longest theight of my open sliding menus and setting the min-height: to that value + a padding of 75 so it ended up being 2075px and looks perfect now.

Now if I could center my contact us tables it would look pretty (it seems it is only on this page as if you look at [url="http://www.mainenotarynet.com/deborah_a_ellis.php"]This page[/url] everything centers correctly. I am wondering if a min-with and max-width would help but that is also what created the 'hole' before. any ideas?

thank you
×

Success!

Help @mainenotarynet spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...