CODEWITHSUNDEEP
htmlcss
Jamsandwich
Jamsandwich

Reputation: 634

Website Header That Resizes

I found and modified this basic bit of CSS to create top, left and side sections of my page.

.top {
    position:fixed;
    text-align:center;
    margin-left:250px;
    left:0; right:0;
    height:34px;
    background-color:#F2F2F2
}
.left {
    position:absolute;
    left:0; top:0; bottom: 0;
    width: 250px;
    background:#b41601;
}
.main {
    position: absolute;
    text-align:center;
    margin-left:250px;
    left:0; top:100px; right:0; bottom:0;
}

The left section is an accordion menu which is all sorted. I would like the top to be a header that has just a plain colour background with some text as a title.

My problem is that when I resize the window the title squishes in and overlaps into the main section.

Is there a better way to get what I need?

Upvotes: 0

Views: 51

Answers (3)

Jamsandwich
Jamsandwich

Reputation: 634

I tried out the code from Shudhansh, but it caused a few problems with the layout I'm trying to achieve.

I decided to start from scratch with something far simpler that I found while exploring the w3schools.com CSS Float guide.

Here is what I have used and so far it's working great.

.top{
    margin-left:250px;
    text-align:center;
    color:#b41601;
    background-color:#F2F2F2
}
.left{
    position:absolute;
    top:0;
    float:left;
    width:250px;
    height:100%;
    background:#b41601; 
}
.main{
    margin-top:10px;
    margin-left:250px;
    text-align:center;
}

Upvotes: 0

Shudhansh Shekhar
Shudhansh Shekhar

Reputation: 720

I think this must be the solution of your problem.

.top{
    position:fixed;
    width:100%;
    top:0;
    text-align:center;
    background:aliceblue;
    border-bottom:1px solid #e2e2e2;
}
.down{
    margin-top:25px;
    position:relative;
    width:100%;
}
.left{
    position:relative;
    float:left;
    width:29%;
    border-right:1px solid #e2e2e2;
}
.main{
     position:relative;
    float:right;
    width:70%;
}
<div class="top">
    <h>HEADER</h>
</div>
<div class="down">
    <div class="left">Left Cont</div>
    <div class="main">Main Cont</div>
</div>

Upvotes: 0

John Hudson
John Hudson

Reputation: 83

Look in to the @media css rule , if the width goes below a certain value the webpage would respond to that, also its common in most browsers css3 is now a standard in most major browsers, even Mobile devices , It responds to either resizing or just a small display

Upvotes: 1

Related Questions