CODEWITHSUNDEEP
htmlcss
schenker
schenker

Reputation: 953

Can't seem to get the layout right using css

I'm using 4 php files to define each of the 4 main elements in my website (sidebar, top-username, contents and footer). I manage to get the layout right, but I don't want the site to re-size. When I re-size the browser, the division with the username conflicts with the sidebar. I don't want to this happen. Please take a look at the attached image and tell me how can I prevent this.

enter image description here

Now the problem is the footer. Its always conflicting with the body. Try putting it very long body contents and the footer remain mid-way up the body. My code below:

You can view it here: jsfiddle

    HTML:




  <body>
  <div id="user-logged">
    You are logged in as : <strong>User</strong><br>Logout
 </div>
 <hr>
 <div>
    <a id="logo" href="."><img id="logo" src="images/logo.png"     
 alt="BRS"/></a>
    <div id="sidebar">
        <h1 style="color:#fff; padding-left:20px; font-size:15px;">My    
 Reporting System</h1>
        <ul>
            <li>Outlet Settings</li>
            <li>Update Daily Stats</li>
            <li>Void Stats</li>
            <li>Email Report</li>
        </ul>
    </div>
 </div>
 <div class="body-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam        

  pharetra eget lacus vitae elementum. Morbi a justo est. Aenean aliquet    
  elit ac nunc vestibulum rutrum. Vestibulum blandit pellentesque erat, a 
  imperdiet          sem. In egestas in sapien at pellentesque. Praesent non 
  commodo nunc. Integer porta malesuada placerat. Maecenas nec sem varius, 
  suscipit sem vitae, vulputate ligula. Nam sed ligula suscipit, faucibus 
  augue et, iaculis        nibh. Cum sociis natoque penatibus et magnis dis 
  parturient montes, nascetur ridiculus mus.
    Nam at neque vel est elementum tincidunt. Nullam accumsan finibus 
   mauris, non auctor enim. Vestibulum ante ipsum primis in faucibus orci 
  luctus et ultrices posuere cubilia Curae; Ut at ligula eu turpis volutpat 
  aliquet et et          quam. Aliquam est nulla, eleifend eu nibh a, 
 lobortis mollis ex. Class aptent taciti sociosqu ad litora torquent per 
 conubia nostra, per inceptos himenaeos. Sed cursus, dui eu finibus 
 ultricies, leo velit laoreet sapien, in pretium         lectus ipsum quis         
 </div>
 <div id="footer">
    Test 2015. All rights reserved.
 </div>

  </body>





 CSS:

 #logo {
 position:absolute;
 top:5px;
 left:15px; 
 width:150px;
 height:auto;
 }
 #sidebar {      
 width:200px;
 min-height:500px;
 height:auto;    
 background-color: #6699cc;
 padding:1px;
 }
 #user-logged {
 top:0px;
 right:0px;
 text-align: right;
 padding-top:50px;
 padding-right:10px;
 margin-left:200px;
 height:50px;
 min-width:200px;
}
.body-content {
position:absolute; 
top:126px;
margin-left:202px;
min-height:700px;
background-color: #ccc;   
width:80%;
clear:both;
height: auto !important;
}
#footer {
position:absolute;
padding-top:20px;
width:100%;
height:150px;
font-size:12px;
background-color: #cc9966;
text-align:center;
font-weight:bold;
color:#fff;
}

Upvotes: 0

Views: 73

Answers (2)

Arun Kumar M
Arun Kumar M

Reputation: 1601

Your issue is solved in the below link, check out

click here

<div id="wrapper">
    <div id="header"><div id="header-content">Header</div></div>
    <div id="content">
        <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
        <div id="main">
            Main<br />
            Main<br />           
        </div>
    </div>
    <div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

CSS:

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
    position: relative
}
#footer {
    height: 50px;
}
#footer-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
.push {
    height: 50px;
    clear: both;
}

#header {
    height: 50px;
}
#header-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
}
#main {
    margin-left: 102px
}

Upvotes: 1

Abdulla Nilam
Abdulla Nilam

Reputation: 38672

You are not posting any code, So i assume you may be use HTML <frameset> or php inculde().

But best thing is use Bootstrap Framework which currently having inbuilt Media Query.

You can go through Bootstrap Tutorial to get idea about it

Note: <frameset> is not support it HTML 5

Upvotes: 0

Related Questions