I have following layout structure:
<div id="wrapper">
<div id="head"></div>
<div id="columns">
<div id="menu"></div>
<div id="content"></div>
</div>
<div id="foot">
<div id="copyright"></div>
<div id="username"></div>
</div>
</div>
with this css:
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: absolute;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
top: 50px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
position: absolute;
width: 1000px;
bottom: 20px;
left: 0px;
}
The issue is, that the footer is displayed "to high up" in the page and the content - div is "bigger", which means it has stuff below the footer. See:
If i use position: relative for the footer, it is displayed a bit lower but not below columns-div as I would expect. I also tried with clear:both but that does not change anything.
I'm not a css expert so can someone post a solution and explain why the footer is displayed in this way?
<style>
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: absolute;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
top: 50px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
margin-top:25px;
width: auto;
}
</style>
<div id="wrapper">
<div id="head"></div>
<div id="columns">
<div id="menu"></div>
<div id="content"></div> <div id="foot">
<div id="copyright">Footer</div>
<div id="username"></div>
</div>
</div>
</div>
Ok, DaveHogans comments lead me to following solution:
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: relative;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
clear:both;
position: relative;
width: 1000px;
padding-top: 10px;
padding-bottom: 50px;
}
Related
Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
This is the image I have:
How do I centre the black circle, I have tried a number of ways, best has been using absolute, but i cannot make it responsive.
Its on JSFIDDLE
And here is the code:
HTML
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
</div>
CSS
.main {
position:relative;
width:100%;
height:100%;
}
.rightTop {
float:right;
background-color:red;
min-width:50%;
height:250px;
}
.leftTop {
float:left;
background-color:blue;
min-width:50%;
max-width:50%;
height:250px;
}
.rightBottom {
float:right;
background-color:yellow;
min-width:50%;
height:250px;
}
.leftBottom {
float:left;
background-color:orange;
min-width:50%;
max-width:50%;
height:250px;
}
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
As I have said above, I have managed to centre it using LEFT, TOP but it is not responsive. Also it's not 50% as I would expect.
Any ideas what it is i am doing incorrectly ?
You could use positioning for this (getting rid of those inefficient and horrible float elements), in combination with the calc css3 property.
You may also be interested in using vw units, in which I have used to make the circle responsive to the width of the screen:
html,
body {
margin: 0;
padding: 0;
}
.wrap {
margin: 5vw;
height: 80vh;
width: 90vw;
display: inline-block;
position: relative;
}
.wrap div {
position: absolute;
height: 50%;
width: 50%;
}
.wrap .red {
background: tomato;
top: 0;
left: 0;
}
.wrap .yellow {
background: yellow;
top: 0;
left: 50%;
}
.wrap .green {
background: lime;
top: 50%;
left: 0;
}
.wrap .blue {
background: cornflowerblue;
top: 50%;
left: 50%;
}
.wrap .black {
background: black;
height: 20vw;
width: 20vw;
border-radius: 50%;
top: -webkit-calc(50% - 10vw);
top: calc(50% - 10vw);
left: -webkit-calc(50% - 10vw);
left: calc(50% - 10vw);
}
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="black"></div>
</div>
just add margin-left:-200px; in
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
margin-left:-200px;
}
here is the updated fiddle file
DEMO
Added:
top: 50%;, and left: 50%; to make it displayed relative to its parent: .main { position: relative
Added transform: translate(-50%, -50%) to center it. To center it on its own center point :D
You should be clearing the floats in your main container.
To do so add this to the main element:
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
<div class="clearfix"></div>
</div>
<style>
/* Add this to your CSS */
.clearfix{
clear:both;
}
</style>
This will make the main container expand to the height of those floaters. After that you can use:
.center{
margin-top:-200px;
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
**OR**
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
-webkit-transform:translate(-50%,-50%);
}
Add this css in your code:
.center {
background-color: #000000;
border-radius: 50%;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 400px;
}
See demo http://jsfiddle.net/JentiDabhi/gnhwork9/1/
So my goal here is to create 5 rectangles next to each other that are centered left, right, up, and down no matter how you re-size the browser.
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</body>
#test1 {
background-color:blue;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
float:left;
}
#test2 {
background-color:black;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 25%;
float:left;
}
#test3 {
background-color:gray;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 25%; bottom: 0; right: 0;
float:left;
}
#test4 {
background-color:yellow;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 50%; bottom: 0; right: 0;
float:left;
}
#test5{
background-color:orange;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 50%;
float:left;
}
This is the code I have so far and it almost works. But the rectangles start to overlap at a certain browser window width. I thought it would work to change the width to a percentage on each rectangle but if they are all at the same percentage they are just sitting on top of each other. Thanks in advance hopes someone can help me understand this a bit more.
What it looks like with maximized browser
What I wand to avoid when the browser gets too small
Here is a fiddle demonstrating my solution. Basically, I added a container for your boxes, centered that, and then set the boxes to 20% of the container's width.
The HTML:
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</div>
</body>
The CSS:
#container{
width: 80%;
position:fixed;
top:45%;
left:10%;
padding: 0;
height: 40px;
}
#test1 {
background-color:blue;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test2 {
background-color:black;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test3 {
background-color:gray;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test4 {
background-color:yellow;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test5{
background-color:orange;
width:20%;
height:40px;
margin:auto;
float:left;
}
Let me start with the working fiddle, explanation below:
First, wrap your divs in a main div, and to make things simple, I gave all the child divs a common class:
<div id="main">
<div class = "box" id = "test1">
</div>
<div class = "box" id = "test2">
</div>
<div class = "box" id = "test3">
</div>
<div class = "box" id = "test4">
</div>
<div class = "box" id = "test5">
</div>
</div>
Now we need the main div to do two things, first, be 100% wide, second, have the same height as width, so we add the following css:
#main {
width: 100%;
position: relative; /* for absolutely positioned children */
}
#main:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 ratio */
}
Then we give the common style to the boxes:
.box {
width: 33%;
height: 33%;
position: absolute;
margin: auto;
}
Now we set up the child elements (I might have changes the colors, oops)
#test1{
background-color: blue;
left: 0;
right: 0;
top: 0;
}
#test2{
background-color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#test3{
background-color: green;
left: 0;
right: 0;
bottom: 0;
}
#test4{
background-color: red;
left: 0;
top: 0;
bottom: 0;
}
#test5{
background-color: purple;
right: 0;
top: 0;
bottom: 0;
}
And there you go, have fun.
Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
I made an HTML page that includes a header, 3 columns(left, main and right) and a footer.
In the main column I have a table with a height of 100%, so pretty large. Now I want to have my footer under the table.
I do not know what is wrong but my footer is not placed at the bottom, in my case it is almost at the middle of the main table.
The html, body and main class are also set to height 100% so that is working perfect.
The only problem is the footer..
On request here is some more code:
<body>
<div id="wrap">
<div id="hoofding"></div>
<div id="inner-wrap">
<div id="navigatie" style="font-family:old stamper">
<font size="9">Home</font>
</div>
<div id="main">
<div id="right"></div>
<table id= "tabel1">
<div id="inhoud">
<tr><td><p style="font-family:army of darkness"><font size="30">Lettertype 1: The Quick Brown Fox</font></p></td></tr>
<tr><td><p style="font-family:USSR army"><font size="30">Lettertype 2: The Quick Brown Fox</font></p></td></tr>
</div>
</table>
</div>
</div>
</div>
<div id="footer"><font size="1">Copyright © 2013 The Pack</font></div>
</body>
And the CSS file:
html {height:100%; width: 100%;}
body {
margin:0;
padding:0;
height:100%;
width: 100%;
background-color: blue;
}
#hoofding{
margin-right: auto;
margin-left: auto;
height: 355px;
width: 620px;
background-image: url(Afbeeldingen/The%20Pack.png);
}
#navigatie{
z-index: 15;
position: fixed;
height: 50px;
width: 8%;
margin-right: auto;
margin-left: auto;
padding-right: 1%;
padding-left: 1%;
}
#inhoud{
z-index: 2;
position: absolute;
padding-top: 3%;
padding-bottom: 3%;
}
#tabel1{
height: 100%;
width: 70%;
z-index: 1;
background-image: url(Afbeeldingen/Inhoud.png);
margin-left: auto;
margin-right: 15%;
bottom: 0;
padding:15px;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {height:100%; width:100%}
#inner-wrap {
padding-bottom:20px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
height:18px;
background-color: red;
bottom:0px;
color:white;
text-align:center;
clear:both;
}
#left {
position:fixed;
float:left;
width:10px;
text-align:center;
}
#main {
position:absolute;
margin-left:10px;
margin-right:10px;
width: 100%;
height: 100%;
}
#right {
float:right;
width:10px;
text-align:center;
}
#content {
padding:5px;
margin-right:10px;
text-align:left;
}
Thank You
use
bottom: 0;
rather than
margin-bottom: 0;
i think it will work for you.
Try:
#footer{
position:absolute;
bottom: 0px;
text-align: center;
}