I am facing one problem
my footer in page stays down but it not at center.
its right aligned now
I want make it to center aligned.
earlier it was not even staying down but then applied .footerContent css which is mentioned below.
after applying .footerContent. it solved my problem of footer not being bottom of page. now its at bottom but shows extensively right . half of footer gets cut.
can u guys correct n show me whats wrong.
I am attaching here screen so that u can position of footer.
see here
heres markup
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header" runat="server">
<%-- Menu goes here --%>
</div>
<div id="masterpageContent" class="footer">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="footerContent">
<div class="footerbrd">
</div>
<p class="clear">
</p>
<div class="footer">
<div class="c1 fleft">
Best viewed in IE8 and above with Resolution 1024x768
</div>
<div class="c2 fleft">
(c) Copyright 2013
<br />
All Rights Reserved.
</div>
<div class="c3 fright">
Site by abc Team
</div>
<p class="clear">
</p>
</div>
</div>
</form>
</body>
and heres css
/footer start/
.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}
.footerContent {
position: absolute;
height: 50px;
width: 929px;
margin: auto;
bottom: 0px;
}
/footer end/
Change width to 100% in .footerContent and set its margin to 0 auto. It should work for you.
I found this question on google and found the solution to your problem (it is a bit late, but for everyone who is looking)
The page should look like this:
<html>
<head runat="server">
<title></title>
<link rel="Stylesheet" href="../Scripts/layout.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
YOUR PAGE HERE
<div id="push">
</div>
</div>
<div class="footer">
YOUR FOOTER HERE
</div>
</form>
</body>
</html>
And in the 'layout.css' file (save it in the 'Scripts' folder in your website), add this:
.wrapper
{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /*the bottom margin is the negative value of the footer's height*/
}
.push
{
height: 20px; /*'.push' must be the same height as 'footer'*/
}
.footer
{
position: absolute;
height: 20px;
width: 99%;
margin: auto;
bottom: 0px;
text-align: center;
}
Related
I have a web page layout. consists of three parts. the layout is pretty simple and works fine. The problem for small screen the header expands and covers the container beneath it. My question is, how to make the header container expands and in the same time do not cover the container beneath it? Please exclude the fixed height. for example (Height: 150px;). the height must be set to auto or any mode that makes it responsive.
here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="repeat.css">
</head>
<body>
<div class="header-container">
<div>
<ul class="left">
<li>home</li>
<li>menu</li>
<li>links</li>
<li>contacts</li>
</ul>
<ul class="right">
<li>home</li>
<li>menu</li>
<li>links</li>
<li>contacts</li>
</ul>
</div>
</div>
<div class="main-container">
<div class="left-column">
<div class="wrap">
</div>
</div>
<div class="main-column">
<div>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
</div>
</div>
</div>
</body>
</html>
The css code :
* {
margin: 0px;
padding: 0px;
}
.header-container{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background: #ccc;
box-sizing: border-box;
z-index: 10;
}
.left{
padding-left: 50px;
float:left;
}
.right{
padding-left: 300px;
float: left;
}
.main-container{
position:absolute;
margin-top: 80px;
left:0px;
width:100%;
height: calc(100% - 80px);
box-sizing: border-box;
background-color: pink;
z-index:1;
}
.left-column{
position:relative;
padding:0;
margin:0;
float:left;
width:20%;
height:100%;
background-color: #4db6ac;
}
.main-column{
position:relative;
padding:0;
margin:0;
float:left;
width:80%;
height:100%;
background-color: #00e5ff;
}
#media screen and (max-width:720px){
.header-container{
height: auto;
}
.left-column{
display:none;
}
.main-column{
width:100%;
}
}
I got the solution using the jQuery. The solution is posted by Marc Audet. You can find the solution following this link:
CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)
Please if any one has another solution using only css will be highly appreciated.
I want to leave some space among two buttons which is in div tag.I tried lot but still having problem.I created login div which has two buttons. login div is inside header div which I marked as 'h'.I want to leave some space among two buttons where I rounded in green.But now I drawn current displayed location in red color.
.login{
margin:0;
padding:0px 10px 10px 0px;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
}
.login button
{
padding:0px 10px 10px 0px;
}
<div class="header">
<div class="login">
<button class="add">login</button>
<button class="upload">Enquiry</button>
</div> <!--end of login div -->
</div> <!--end of header div -->
.login button
{
margin-left:10px;
}
add some left-margin?
like this type
.login{
margin:0;
padding:0px 10px 10px 0px;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
}
.login button
{
padding:0px 10px 10px 0px;
margin-left: 10px;
}
<div class="header">
<div class="login">
<button class="add">login</button>
<button class="upload">Enquiry</button>
</div> <!--end of login div -->
</div> <!--end of header div -->
You could do:
.login button {
margin-left: 30px;
}
Or you could add a container around your buttons, give that a width, and then float them to the left and right sides.
The HTML:
<div class="header">
<div class="login">
<div class=logincontainer>
<button class="add">login</button>
<button class="upload">Enquiry</button>
</div>
</div> <!--end of login div -->
</div> <!--end of header div -->
The CSS:
.logincontainer {
width: 200px;
}
.add {
float: left;
}
.upload {
float: right;
}
ok try this.....i hope this will be okey...
.login button
{
margin-left:10px;
padding:0px 10px 10px 0px;
}
This is the fiddle http://jsfiddle.net/41fhejfd/4/
I can't get the footer to stick at the bottom of the page. If there is less content, i need it to be displayed without any scroll of course and if there is more content then in the end. I have the following code:
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="height:auto;width:100%;">
<div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="foot">
Contact Us
</div>
CSS:
html, body {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#wrapper {
height:100%;
width:100%;
min-width:1300px;
min-height:100%;
}
#top_bar {
width:100%;
height:45px;
min-width:1200px;
}
#top_add {
margin-left:15px;
height:14%;
width:100%;
min-width:1200px;
min-height:130px;
}
#left_logo {
width:215px;
height:100%;
float:left;
min-width:200px;
padding-left:20px;
}
#right_add {
width:980px;
height:100%;
float:left;
background-color:#E8E8E8;
min-width:750px;
}
#foot {
background-color:#333333;
width:100%;
height:250px;
}
What am i doing wrong? When the content size is small, the property defined as max-height:100% takes the whole page and shows is empty and displays the footer in the end which is found after scrolling.
you want to sticky footer right, so you must be used a css position to set it fixed anywhere in the page
for bottom div add this css
#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}
please visit live demo here http://jsfiddle.net/Zsg8G/
thank you...
EDITED: hello, i found the your problems please now try this code
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="">
<div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="push"> </div>
<div id="foot">
Contact Us
</div>
html,body{height:100%;}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}
here you must be remove the float: left...
live demo with: more content: http://jsfiddle.net/SCr7b/1/ and with less content: http://jsfiddle.net/HYf7q/
thank you..
Check out Chris Braco's solution to this: http://cbracco.me/css-sticky-footer-effect/
Essentially you need to ensure there is padding below your body content to prevent an overflow under the footer, and use position: absolute; on the footer.
Here's your code with a working footer: http://codepen.io/anon/pen/IbmiC
Let me know if you have any issues with this.
I need css code for this kind of site:
And with my code I get this:
This is my code of index page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=right_side>
THIS IS RIGHT SIDE
</div>
<div id=footer>
THIS IS FOOTER
</div>
</body>
This is css file:
h1{
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
#header{
margin : 0px;
position: relative;
width:80%;
background-color: red;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#navigation{
margin : 0px;
width:80%;
background-color:blue;
}
#right_side{
width: 20%;
float: right;
background-color: #green;
}
#footer{
clear: both;
position: relative;
width:80%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: gray;
}
#account{
position: relative;
width: 20%;
float: right;
background-color: #yellow;
}
#content{
width:80%;
float:left;
background-color:#black;
color: white;
}
Please if someone know how to position divs like on my first picture. When I try something I always get strange results. Thanks for help!
Alright, there were a few problems with the way that you wrote your HTML. First, ID tags should always have quotations around the ID name. I would just make a container div, a div for the left, and a div for the right side.
I made a demo that uses floats to control the layout. The divs are contained in a large div that is restricted to 800 pixels.
Here's the demo that I made on JS Bin
HTML:
<body>
<div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
<div id="left-side">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content Here</div>
<div id="footer">Footer</div>
</div> <!-- End of the left side div -->
<div id="right-side">
<div id="account">Account</div>
<div id="right_side">Right Side</div>
</div> <!-- End of the right side div -->
</div> <!-- End of the container div -->
</body>
CSS:
*{
font-family:sans-serif;
}
#container{
max-width:800px;
margin: 0 auto;
}
#left-side{
float:left;
width:60%;
}
#right-side{
float:right;
width:37%;
}
#left-side div{
text-align:center;
margin-bottom:10px;
}
#right-side div{
text-align:center;
margin-bottom:10px;
}
#header{
background-color: yellow;
text-align:center;
padding:20px 0px;
}
#navigation{
padding:10px 0px;
border: 1px black solid;
}
#right_side{
background-color: cyan;
padding:50px 0px;
}
#footer{
background-color: gray;
padding:5px 0px;
}
#account{
background-color: green;
padding: 10px 0;
}
#content{
background-color:black;
color: white;
padding:100px 0px;
}
Change HTML as follow because you need container divs:
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div class="left_container">
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=footer>
THIS IS FOOTER
</div>
</div>
<div class="right_container">
<div id=right_side>
THIS IS RIGHT SIDE
</div>
</div>
</body>
in CSS file add also
.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}
Something like this perhaps?, learn about CSS class'es there reusable (incase you might want multiple right side box's and it will shorten the CSS code because you dont need to create a selector for every element.
Copy and paste source - change to suit...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
#wrapper {
width:800px;
height:100%;
margin:0 auto;
}
#wrap-left {
width:75%;
height:100%;
float:left;
}
#wrap-right {
width:25%;
height:100%;
float:right;
}
#header,#navigation,#footer,.right-small {
height:45px;
margin:10px;
}
#content,.right-tall {
height:230px;
margin:10px;
}
.round-corners {
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
padding:20px;
}
.bg-yellow {
background:#FEF200;
}
.bg-red {
background:#ED1B24;
}
.bg-blueish {
background:#3F47CC;
}
.bg-green {
background:#23B14D;
}
.bg-grey {
background:#C3C3C3;
}
.border {
border:5px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap-left">
<div id="header" class="bg-red round-corners">
<h1>THIS IS HEADER</h1>
</div>
<div id="navigation" class="bg-blueish round-corners">
THIS IS NAVIGATION
</div>
<div id="content" class="border round-corners">
THIS IS CONTENT
</div>
<div id="footer" class="bg-grey round-corners">
THIS IS FOOTER
</div>
</div>
<div id="wrap-right">
<div class="right-small bg-yellow round-corners">
ACCOUNT
</div>
<div class="right-tall bg-green round-corners">
left side
</div>
</div>
</div>
</body>
</html>
why no use a table
<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >
<tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
<tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
<tr><td bgcolor=cyan height=400px> content </td></tr>
<tr><td bgcolor=grey height=100px> footer </td></tr>
</table>
</body>
you don't need css for that..
I have two div (children inside a div) say div1 and div2. div1 has a fixed width, but div2 occupies all the remaining space (width).
If the div (parent div) has width of 100% i.e. not fixed width, then how should I style div2 such that it takes all the remaining space of div and they appear side by side?
EDIT::
body{ padding: 0; margin: 0; font:0.9em arial,verdana,tahoma,helvetica,sans-serif;}
#wrap{ widht: 100%;}
#header{ width: 100%; background: black; height: 100px; margin-bottom: 20px;}
#navigation{ width: 170px; height: 500px; float: left; margin-left: 20px;padding: 0 20px; border-right: solid 1px #CCCCCC;}
#bodywrap{width: 100%; float: left;}
#body{ min-height: 500px; margin-left: 20px; }
#footer{ width: 100%; height: 60px; background: black; float: left; margin-top: 20px; }
by html code is
<div id="wrap">
<div id="header">
</div>
<!-- end of header -->
<div id="bodywrap">
<div id="navigation">
</div>
<div id="body">
</div>
</div>
<!-- end for body -->
<div id="footer">
</div>
<!-- end of footer -->
</div>
and I want body to take all remaining space left by navigation.
try this
HTML
<div class="prnt">
<div class="fl div1">
--div1 --
</div>
<div class="fl div2">
-- div2 --
</div>
</div>
CSS
.prnt{
padding-left:100px;
}
.fl{
float:left;
height:100px
}
.div1{
width:100px;
margin-left:-100px;
background:#f00
}
.div2{
width:100%;
background:#0f0
}
my solution is the following:
css
#container {width:100%; height:200px;}
#first {width:100px; height:100%; background:black; float:left;}
#second {height:100%;width:auto; background:blue; margin-left:100px;}
html
<div id="container">
<div id="first"></div><div id="second"></div>
</div>
Live example: http://jsbin.com/erure4
The first div has a fixed width of 100px and is floated left. This make the second div to stick near it. The second div will normally get all the width override the first div, for this reason it needs to give a margin-left:100px; (the width of the first div).
I'd say, if I understood you correctly, that this should be it:
<html>
<head>
<title>test div</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#left {
width: 200px;
float: left;
background-color: #dddddd;
}
#right {
background-color: #cccccc;
margin: 0 0 0 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">fixed left</div>
<div id="right">stretched right</div>
</div>
</body>
</html>
added margin to assist Chris' issues with the first draft..
I'm guessing here: try adding padding-left: 230px to #body.