This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 7 years ago.
Though it's a very simple HTML, CSS layout, I am facing problem with this. It does not look like what I want it to be.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body {
margin: 0;
padding: 100px;
width: 100%;
}
div.container {
border: 3px red solid;
padding: 10px;
display: block;
width: 1000px;
}
div.left, div.right {
float: left;
margin: 0 10px;
}
div.left {
background: blue;
height: 300px;
width: 300px;
}
div.right {
background: green;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">This is the main container
<div class="left">This is the left side</div>
<div class="right">This is the right side</div>
</div>
I want to know why left and right blocks overlaps the container element?
</body>
</html>
Why left and right blocks overlaps the container element?
I uploaded a screenshot of the code executed in Chrome on PC. Here is the Google Drive preview link: https://drive.google.com/open?id=0B4av_i4gqoZmRFpXbzVZekR0aGs&authuser=0
Thanks in advance.
Add this style in your CSS file:
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
This should solve the Issue!
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
In this case, the wrapper's height is calculated as zero. However, i wonder how it is sorted without wrapping all the items.
Html code is:
<!doctype html>
<html>
<head>
<style>
.wrapper {
width: 660px;
margin-left: auto;
margin-right: auto;
}
.item {
float: left;
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
Thx, everyone.
What I'm curious about, I think align in this way is to put it in a frame. By the way, I thought that I put it in a frame that had a width but no height, so I asked a question. This is because even if there are more items, that is, even if there are six items, they are arranged with three items per line.
The parent div is not containing its children because they're floated. The easiest fix is probably to add overflow:hidden with display:block to .wrapper,
Please try with following code for wrapper class.
.wrapper {
width: 660px;
display: block;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
You're probably floating the child divs. If so, try below style:
.wrapper {
content: " ";
display: block;
clear: both;
}
When you are using float to the child elements the parent should be float. So use another property as I given below.
.wrapper{
width: 660px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
Take a look at the code.
There is white space below div that contains image.
How can I remove it?
If I delete doctype, white space would be removed. But I need doctype.
Edit: Also I want .container to be "inline-block" and changing It to "block" will just replace the space from below div to the lower part of the .container and won't remove it.
Sorry for bad English.
<!doctype html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
width: 100%;
background: #000;
color: #fff;
}
.container img {
display: block;
}
</style>
</head>
<div class="container">
<img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
123
</div>
Use block for .container.
<!doctype html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: block;
background: #000;
color: #fff;
}
.container img {
display: block;
}
</style>
</head>
<div class="container">
<img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
123
</div>
Just add vertical-align: top to .container class.
Add block to your container:
.container {
display: block;
width: 100%;
background: #000;
color: #fff;
}
Adding display:block; to the element should solve the issue.
This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 5 years ago.
I am attempting the following solution described at https://stackoverflow.com/a/22218694/1175080.
Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).
Here is my solution.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
</style>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
It does not seem to work. The main element does not expand to occupy 100% height of the page. What am I doing wrong? How can this be made to work?
Used height:100vh
body {
min-height: 100vh;
margin: 0;
}
main {
display: flex;
height: 100vh;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<main>
<section>Foo</section>
</main>
Assign html, body with 100% width & height, Like:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Have a look at the snippet below:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
Hope this helps!
The main element will use the space allotted to by it's parents, which in this case are body > html.
Therefore, set both body and html to have a height of 100% as well and you should be golden.
html, body {
height: 100%;
}
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
Just need help as I have been trying sort this out for ages now. What I need:
I've got a 2 column layout, where the left column has a fixed width 220px and the right column has a fluid width.
Code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
There's no problem at all. When I use a css syntax clear: both in the right column, all content after gets moved under the left column. This is a right behaviour and nothing against it.
But I relly need to use clear: both in the way, that it stays just in context of the right column (doesn't get affected by the left column at all, and doesn't move underneath)
Is there any simple get around with retaining a basic float concept of page design?
UPDATE: Please see this link to know what I'm on about as it may be a bit confusing from my description.
Link: http://jsfiddle.net/k4L5K/1/
Here's your altered CSS:
html, body {
background: #ccc;
}
.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}
.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}
.sidebar {
width: 200px;
float: left;
height: 200px;
}
.main, .sidebar {
background: #eee; min-height: 100px;
}
.clear { clear:both; }
span { background: yellow }
Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:
A padding of 240px on the .wrap div, and
A right margin on the .main div of -220px to properly align the fluid part of the page.
Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.
You can see a demonstration here: http://jsfiddle.net/6d2qF/1/
The question is quite old but here is the another solution which I've found recently.
We just need to do 2 things:
Add overflow: auto; to the .main div
Make sure wrapper preserves document flow by adding overflow: hidden; to the .wrap div, or adding .clear div as the last child of .wrap element
Here is the updated fiddle: http://jsfiddle.net/k4L5K/89/
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; }
.main,
.sidebar { background: #eee; min-height: 100px; float: left; }
.clear {clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
<div class="clear"></div>
</div>
</body>
</html>