2 replies [Last post]
rsmldmv
rsmldmv's picture
Offline
newbie
Last seen: 18 weeks 15 hours ago
Timezone: GMT-7
Joined: 2013-02-17
Posts: 4
Points: 7

I'm fairly new to web development and I know CSS is quite involved. My question is probably pretty simple for most of you but I have a personal site in which I have a header and footer sections. In the middle I have a div which is a left side-bar menu. The problem that I'm trying to solve is that depending on which browser I'm testing with, the side-bar div doesn't align correctly when the screen size is changed. Here are the CSS rules that I'm using for the footer and div. I've also attached several images so you can see exactly what's happening.

p.footer {
    font-style: italic;
    font-size: 10pt;
    color: tan;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}
 
div.menuBar {
    background-color: #71635A;
    height: 655px;
    margin-left: 59px;
    border-radius: 0px 0px 10px 10px;
    border-left: 10px solid orange;
    box-shadow: 4px 4px;
    width: 15%;
    float: left;
    position: relative;
    padding: 3px 3px 3px 3px;
}

I hope I've conveyed correctly what I'm trying to do.

Thanks for your help!

Blake

rsmldmv
rsmldmv's picture
Offline
newbie
Last seen: 18 weeks 15 hours ago
Timezone: GMT-7
Joined: 2013-02-17
Posts: 4
Points: 7

Forgot Images

Sorry...forgot to attach screenshots.

AttachmentSize
firefox_image.jpg 85.17 KB
opera_image.jpg 8.14 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 52 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9714
Points: 3790

Height is automagical

The default for the height of a block element (e.g. div) is automatic. You have set a fixed height which negates the default.

I notice that you use the pt metric for a font. Points are strictly a print metric. For the web, you should use the em measure. This allows measures proportional to the visitors favored size.

There may be a sane reason for setting a float element to position: relative;, but I haven't seen it in more than 20 years of web development. I exclude some of the hacks and work-arounds we did to cover up MSIE's idiocy.

You set the div's width to a percentage; that's usually a GoodThing®.

gary

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