10 replies [Last post]
Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

Hi,

I think this is a basic question so wont post any code just yet.
I have a main div central on the page. I have another fixed div as a side bar.
My issue is that I created the page on my 17" and when I open it on a 15" the two divs overlap.
How can I sort this out and make the central div move over to fit the fixed div in on smaller screens.
Thanks

Aryeh

pav
pav's picture
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

Use Percent

Correct me if I am wrong, but I am assuming you are using Pixel values for Div width.
If you are catering to multiple devices, it is better to specify width in percent instead of pixel.
Try reading more on Responsive Web Design.

Cheers! .Pav

Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

Re:Percent

Thanks. I actually tried that an it did work, however it just makes the central div smaller. I was wondering if there was a way to make it move over. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Did you apply percentages to

Did you apply percentages to the widths of the other column/s?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

yes, didnt seem to help, here

yes, didnt seem to help, here are the 2 parts of the css....

.main_wrap {
position: relative;
height: auto;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
width: 70%;
margin-top:15px;
margin: 0px auto;

}

.sidebar_right {position:fixed;
right:20px;
margin-right:5px;
top:10%;
height:auto;
width:12%;
background-color:#fff;
padding-right:5px;
padding-left:5px;
padding-bottom:10px;

}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

{position: fixed;}

We, pav and I, have been guessing and doing badly at it. The column with fixed position is out of the flow, and is invisible to other elements and other elements are invisible to it.

What you show us in your last post should, kinda, maybe work. That it doesn't, implies there are other issues best debugged by seeing the actual page. Can you provide a link?

If a live link is not possible, make a minimal test case. If you are unfamiliar with the term, it's a complete html document with the minimum amount of css and html marked-up dummy content that will manifest the problem.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

heres the link, against my

heres the link, against my better judgement.... Smile
i'm still at the basic level so usually get plenty of criticism

http://jyp.azcoweb.com/businesses.html

Puzzled

cheers mate.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Immediate fix

For the short term:

You're cutting things a little close. At 70 and 30 percent, there's no allowance for borders or for box shadows. Try using 65% and 30% instead.

Using fixed position for your menu is not a Good Thing. With fixed position, any overflow, such as at the bottom of a short browser window (like mine), will be lost; irretrievable.

For the long term:

Absolute positioning is a bad idea for major layout elements. If you think it's necessary, you have two problems; 1) you're using absolute positioning, and 2) you haven't thought through the structure of the html and/or the css methods.

Your layout is simple, and your structure isn't bad. You are using the wrong tags pretty much. The main content, those business cards, belong in a list. Your business card images need good alternative content that mirrors the gist of the card's info. I'd suggest using the object element instead of the img element for that reason.

I suspect you chose to use the h4 heading level because of its default size. Don't. These should be h2, the first level down from the page heading (an h1). Use css to set the desired font-size.

Use the W3C validator. You have syntax errors. Validate like they vote in Chicago, early and often. Fixing an error early is a lot less painful that waiting until you've accumulated a bunch. Errors can cascade, causing otherwise ok syntax to throw an error. Also, never use a transitional doctype to author a new document. Use strict only.

Those script elements belong in the head section, not in the body. It's not invalid, it's just not a Best Practice. If they are not used in a page (and I didn't see their use here) don't link them.

Apply the quick fix, and if you want to learn more Best Practice, apply the long term fixes. Where you run into problems, we're here to assist you. Once the html is right (and, that's always the starting point), we can show you how to apply css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

Thanks Gary, I was expecting

Thanks Gary,

I was expecting something like that.
The website is not much in use, hence the random scripts, they are trial and error sort of stuff.
I have tried to keep most of my elements positioned relatively, if I didn't it was because I couldn't work out how to make them go where I wanted them to go.
As for the fixed position side bar it was also because I couldn't work out any other way.
As you can see I'm learning on the go.
I will check out all you said and see what I can do to improve.
Thanks for your help, expect more questions...

A

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Relative positioning

I'm willing to bet that {position: relative;} means something different from what you expect. All of the position values except static are full of misunderstood nuances that give birth to massive gotchas with big teeth.

Unfortunately, the siren song of the position property invites the new web designer to believe it's now just a matter of 'placing' his content where he wants it. It doesn't work that way, though. The more he tweaks, the bigger the bites taken from his posterior; all the while he's drifting onto the rocks and shoals of a lee shore.

Take heart. There are many methods to lay out the page, and all are easier to fully grok and to use than the position property.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Aryehzc
Aryehzc's picture
Offline
newbie
Last seen: 7 years 14 weeks ago
Timezone: GMT+1
Joined: 2013-06-11
Posts: 6
Points: 7

Shipwreck

Well that's a new way of putting it. I like the description Smile
And you're the first person I've heard who says the position property is not the way to go.
As far as I understand position:relative means relative to the last element which sort of cascades all the way back up to the position of the first div on the page.
However, I'm willing to hear how I can do it easier...I'm all ears.

Cheers, I'm off to bed.

A