I am creating Web user interface for a Web application. The interface has header, footer and in between two rectangles in horizontal line. Rectangles are separated by space. All these features are created using tags.
Below is given CSS to format the left rectangle:
#sidebar1 {
position: absolute;
left: 150px;
width: 450px;
height:250px;
background: #EBEBEB;
padding: 20px 0;
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
The problem is that when you squeeze or extend the window of browser those rectangles change position or overlap one another. This is not acceptable.
I have tried other options of position keyword in CSS such as position: fixed or position:relative or static but the representation is still wrong. Likewise I tried float:left and float: right but that still makes the rectangles to move and overlap. I want those rectangles to stand still despite that you are extending or squeezing the window.
What are your solutions, please?
Best regards
Current code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Spring Web MVC project</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
/*padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: black;
}
#header {
background: green;
/* top: 100px; */
text-align: center;
margin: 55px;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#sidebar1 {
position: absolute;
left: 150px;
width: 450px; /* since this element is floated, a width must be given */
height:250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#sidebar2 {
position: absolute;
right: 150px;
width: 450px; /* since this element is floated, a width must be given */
height: 250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:green;
width:95%;
margin:55px;
position: relative;
bottom: -300px;;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<!--<div id="container"> -->
<div id="sidebar1">
<h3>blah blah</h3>
<p><li>blah blah</li> </p>
<p><li>blah blah</li> </p>
<p><li>blah blah</li></p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>blah blah</h3>
<p><li>blah blah</li> </p>
<p><li>blah blah </li></p>
<p><li>blah blah</li></p>
<!-- end #sidebar2 --></div>
<p>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
</p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<p>Footer</p>
<p>Terms & Conditions</p>
<!-- end #footer --></div>
<!-- end #container --> <!--</div> -->
</body>
</html>
There's no reason to absolute position anything here...it's just going to lead to headaches. In general, do absolute position only when absolutely necessary, which for me is almost exclusively when I have to float something over the top of something else. Otherwise, everything is relative to something else, as is default.
Here's a simple strategy to make this work:
<div class="pagecontainer">
<div class="header">
Header Goes Here
</div>
<div class="bodycontainer">
<div class="floatleft">Leftbox</div>
<div class="floatleft">Rightbox</div>
<div class="clear"></div>
</div>
<div class="footer">
Footer Goes Here
</div>
</div>
Style follows:
.floatleft {
float: left;
otherstyle: here;
margin: 5px;
}
.clear {
clear:both;
}
Yes, this is abstract, so you'll have to customize it for your particular purposes.
The key to avoiding the overlaps is ensuring that your divs inside the body container never exceed the size of the bodycontainer parent element (don't forget margins and in some cases padding (stupid IE) count toward that value) and that both are floated left with a clear float afterward.
If you want to make it scary simple, use a grid such as 960.gs
Related
I'm trying to have a fixed header on my webpage, i.e. it should always remain visible, even when scrolling. Note that my page is fixed width (800px) and horizontally centered on the screen.
What I've tried:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>
The separator is a horizontal line which should go all the width of the screen, see the footer.
Problems with this:
1. using the position:fixed also places it at left=0, instead of centered.
2. the separator doesn't show.
I can make the separator visible by placing it inside the header, but then the width is limited to 800px:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
<div class="separator clearfloat"></div>
</header>
The testpage is here.
How do I fix this?
I would position parent element as fixed and center header with margin: 0 auto;
jsFiddle Demo
Html:
<div id="top">
<header>Header</header>
</div>
<main>
<!-- Lots of content here. -->
</main>
Css:
#top {
position: fixed;
left: 0; top: 0px; right: 0;
z-index: 1;
/* The below styling is here for illustrative purpose only. */
border-bottom: 1px solid #c1c1c1;
background: #fff;
opacity: 0.9;
}
#top header,
main {
width: 500px;
margin: 0px auto;
}
#top header {
height: 100px;
/* Border styling is here for illustrative purpose only. */
border-left: 1px dashed #c1c1c1;
border-right: 1px dashed #c1c1c1;
}
main { margin-top: 100px; /* Should be the same as '#top header' height. */ }
Ok, a working solution.
In <header> wrap all the content (except separating line) with a <div>.
To that <div> you should add
overflow: hidden; //optional clearfix
width: 800px;
margin: 0 auto;
And also you should add width: 100%; to <header>
Just make your header the full width of the page and make that position: fixed;
Then wrap your header content in a div tag and set that to width: 800px; margin: auto;
This makes your header stay on a fixed position on top of your page.
And uses the div to set your menu/header data in the middle of the page.
I’m trying to drift away from using tables and I'm now trying to create a simple div-based layout - header, content, footer divs with 100% width and no parent div. But I'm having a little problem with it. My content and footer divs overlap header div if I ever insert anything there. They appear right in the middle of the header div. If they are empty they appear normally. But the moment I insert header image in it the problem starts.
I tried to change float and display properties, but it gives me strange output. Can anyone help me position them vertically one after another?
Here is the HTML code:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
And here are the css styles:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
You are using absolute and relative positioning a lot
and they are making your layout look Bad and elements are over lapping.
Also you don't need to define margin and every other properties many times
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
Horizontal Layout
CSS-Reset
Vertical Layout
Just remove all position:absolute from CSS rules and you are done.
Here is a solution for you. You don't need to specify width=100 Without defining a width, it is 100% by default. Simply specify the width you want for the body and every other container will be that width. float: left; will prevent containers from stacking vertically. They will actually stack horizontally.
Rather than using many Ids for Div, you can simplify the tags with HTML5 tags in such a way as below.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style type="text/css">
body {
margin: 0 auto;
}
menu {
height: 20px;
background-color: #800000;
text-align: center;
margin: 0px;
}
header {
background-color: #0FF;
text-align: center;
margin: 0px;
}
article {
margin: 0px;
text-align: center;
background-color: #0CC;
}
footer {
margin: 0px;
text-align: center;
background-color: #CF3;
}
section {
height: 100px;
margin: auto;
background-color: #C30;
}
</style>
</head>
<body>
<menu>topmenu</menu>
<header>Header
<article>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
</article>
</header>
<section>content</section>
<footer>footer </footer>
</body>
</html>
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
I am currently using this CSS:
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
Any help? Thanks!
I use sticky footer: http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
you could make the footer div absolute to the page like this:
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
I use a few DIV elements for each section of my webpages.
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
if you want that your footer be fixed on your page :
.footer{ position:fixed;}
but if you want your footer fixed end of page :
see that
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
Use below styling for footer element
In-line style
External style sheet using class attribute in Div
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
You can use this styles in your CSS to achieve your goal
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
I was facing same issue and solved it with using jquery.
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>
What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.
I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.