I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
Related
I have an easy and stupid problem. I'm trying to fit a div under another div with height:100% without producing overflow, just fitting in body's height.
Example not working: https://jsfiddle.net/L38cea2s/1/
HTML:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
CSS:
html, body {
height:100%;
}
#top {
width:100%;
height:50px;
background-color:red;
}
#left {
width:70%;
height:100%;
background-color:green;
float:left;
display:block;
}
#right {
width:30%;
height:100%;
background-color:yellow;
float:right;
display:block;
position:absolute;
}
I don't know why on jsfiddle my divs are not ocuppying 100% of width's body. But as you can see on the example, there's overflow because there's another div above both divs. I don't want an overflow:hidden.
Thanks!
Edit:
I'm searching for something like this: (Any div is behind any div)
This jQuery might help
var body = $('body').height();
var top = $('#top').height();
var workoutheight = body - top;
$('#left').css('height',workoutheight);
$('#right').css('height',workoutheight);
https://jsfiddle.net/L38cea2s/7/
I did a CSS only solution
Get the updated markup from JSFiddle
CSS
body {
margin: 0;
}
.sidebar {
width: 20%;
float: left;
background: #B2B200;
height: 100vh;
}
.main-content {
width: 80%;
float: left;
height: 100%;
}
.top {
height: 20%;
width: 100%;
background: #26FF5C;
height: 20vh;
}
.left {
width: 70%;
float: left;
background: #4DFFFF;
height: 80vh;
}
.right {
width: 30%;
float: left;
background: #8500B2;
height: 80vh;
}
https://jsfiddle.net/aq8awrnz/
You can use calc in your CSS as well... Example:
#left {
height: 100vh;
width: 300px;
float:left;
}
#top {
height: 45px;
width: calc(100vw - 300px); // or calc(100% - 300px)
margin: 0 0 0 300px;
}
#right {
height: calc(100vh - 45px);
width: 30%;
float: right;
}
#middle {
height: calc(100vh - 45px);
margin: 0 30% 0 300px;
}
The best is to use layering while thinking how you'll stack everything on top of each other. I've updated your jsFiddle here.
https://jsfiddle.net/L38cea2s/8/
html, body {
height:100%;
margin: 0;
}
#top {
width:100%;
height:50px;
top: 0;
background-color:red;
position: absolute;
}
#left {
width:70%;
height:100%;
top: 0;
background-color:green;
position: absolute;
}
#right {
width:30%;
height:100%;
top: 0;
background-color:yellow;
position: absolute;
}
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
I'm trying to make a 4 split landing page with an icon and a text underneath it, centered both horizontally and vertically inside each div. I tried various solutions, non of which seems to work, so i'm posting what i have so far. Here's a jsfiddle http://jsfiddle.net/W8gs3/
HTML:
<div id="rect1">
<p><img src="icon.png"/></p>
<p>Sound</p>
</div>
<div id="rect2">rect2</div>
<br />
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
<br />
CSS:
/* CSS Document */
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
}
#rect1 {
background: #0066FF;
}
#rect2 {
background-color: #CC0033;
}
#rect3 {
background-color: #669966;
}
#rect4 {
background-color: #FFCC33;
}
br {
clear: left;
}
If you add an additional div into your html:
Sound
<div id="rect2" class="outer">
<div class="inner">rect2</div>
</div>
<div id="rect3" class="outer">
<div class="inner">rect3</div>
</div>
<div id="rect4" class="outer">
<div class="inner">rect4</div>
</div>
You can use the following styles:
div.outer {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
display:table;
}
div.inner {
display:table-cell;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
}
Example
According to my understanding you want to align img to center, below is my suggestion
Make the img tag inline which you want to center align.
#rect1 p img {
display: inline;
width:30px;
height:30px;
}
#rect1 p {
text-align:center;
}
hope this will solve your problem
Add this code
HTML
<section>
<div id="rect1">
<p><img src="icon.png"/></p>
p>Sound</p>
</div>
<div id="rect2">rect2</div>
</section>
<section>
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
</section>
CSS
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
section{
position:relative; height:50%; width:100%; display:table;
}
div {
padding:0;
margin: 0;
width:50%;
height:50%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
#rect1 {
background: #0066FF;
}
#rect2 {
background-color: #CC0033;
}
#rect3 {
background-color: #669966;
}
#rect4 {
background-color: #FFCC33;
}
Here is a working fiddle http://jsfiddle.net/W8gs3/14/
you can make center the image and text using the below CSS. check the DEMO.
#rect1, #rect1 p img {
background: #0066FF;
display:inline-block;
text-align:center;
}
#rect1 p{
margin:0;padding:0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
If ancient browser support is not an issue, you can use css3 flexbox as follows:
div {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
}
JSFiddle
try this
div {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
text-align: center; /*add this*if it is necessary in the middle of all the elements*/
}
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}