I need a little help here for my html/css code ... I need to follow the height of my divbody to divwrapper, since the divwrapper was floated to left, the height of my divbody is only 10 (theres padding valued 5px). This is the code, thanks!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Information Technology</title>
</head>
<style>
body{
margin:0px;
}
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
.divwrapper{
height:auto;
background-color:#eee;
float:left;
padding:5px;
}
.divcontent{
width:480px;
height:200px;
background-color:yellow;
float:left;
border-bottom:1px solid #000;
}
</style>
<body>
<div class="divbody">
<div class="divwrapper">
<div class="divcontent">
</div>
<div class="divcontent">
</div>
</div>
</div>
</body>
Use clearfix method to fix your float issue.
HTML
<div class="divbody clearfix">
<div class="divwrapper">
<div class="divcontent">
</div>
<div class="divcontent">
</div>
</div>
</div>
CSS
body{
margin:0px;
}
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
.divwrapper{
height:auto;
background-color:#eee;
float:left;
padding:5px;
}
.divcontent{
width:480px;
height:200px;
background-color:yellow;
float:left;
border-bottom:1px solid #000;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Here is an example
Here you can find more information about clearfix.
Add position: absolute; to divbody
.divbody{
position: absolute;
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
Add overflow: hidden; (which is one among many other potential options) to your .divbody to construct a new block context.
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
Read more at: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Demo
You need to add an overflow:auto; to divbody class. What this does is that it wraps itself up according to its child elements.
WORKING DEMO
The Code:
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
overflow:auto; /* The needs to be added */
}
Hope this is what you are looking for.
Use overflow: hidden; or overflow: auto; as quick fix, we are now moving to new age modern browsers, say good bye to cleat:both or clearfix:after
Related
* {
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
The text header is in the span label,it is a inline element,why it can't be displayed at the same line (or say,at the same height) with div header_inside?
To add margin-top:-20px; in css of div.header_inside can make text in span displayed at the same line with div header_inside,it is not my problem.
A div is, by default, display: block so it generates a block box with line breaks before and after it.
If you want it on the same line as some inline content, you'll need to change it to display: inline, display: inline-block, etc.
A div is a block element and need all the space. So no other element can be placed beside a block element. So you have to change the display of the div to inline or inline-block. You can change your code to the following:
* {
padding:0;
margin:0;
}
div.header {
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
display:inline-block;
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
You can use the "inline-block" property, so still a inline element but u can add width and height
<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
<div class="header"><span>header</span>
<div class="header_inside">header_inside
</div>
</div>
</body>
</html>
Got problem with divs..
HTML
<div id="site-menu">menu1
<br>menu2
<br>menu3
<br>menu4
<br>menu5
<br>menu6
<br>
</div>
<div id="site-content">
<div class="site-content">
<div id="site-content-left">left</div>
<div id="site-content-right">right</div>
<div class="clear"></div>
</div>
</div>
CSS
.site-content {
background:pink;
}
#site-content {
background:red;
margin-left:250px;
}
#site-content-left {
background:orange;
float:left;
}
#site-content-right {
margin:5px 0 5px 0;
background:blue;
}
#site-menu {
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {
clear:both
}
There is gap after clear both. The gap is big as menu div height (there is something with menu div).. Any solution please?
jsFiddle.
There are basically two way you can avoid big gap..
1) Instead of clear:both use clear:right
OR
2) Define proper floats for parent and sub divs instead of using margin. Proper div structure won't give above gap..
below is the style for each divs.
.site-content{background:pink; width:100%; float:left}
#site-content{
background:red;
margin-left:250px;
}
#site-content-left{background:orange;float:left; width:5%; }
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%}
#site-menu{
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {clear:both}
clear:both makes the element drop below any floated elements that precede it in the document.
Remove margin: left from #site-content
#site-content{
background:red;
}
check this fiddle
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
I have a problem with CSS and HTML I cannot understand why this is happening
HTML:
<body>
<div id="header">
<div id="header_conteiner">
<div id="logo_container">
<img src="images/logo.png" />
</div>
<input type="text" id="txtSearch" class="text_input" />
</div>
</div>
</body>
CSS:
body{
background:#787777;
font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
font-size:0.81em;
margin: 0px;
padding: 0px;
}
#header{
height:100px;
background:#000000;
width:100%;
margin:0px;
border:0px solid #6F3;
}
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
}
#logo_container{
padding-top:3px;
width:237px;
height:100px;
border:1px solid #03F;
}
#txtSearch{
width:220px;
height:20px; float:right;
}
Here is result:
as you see in image input text is out of header_conteiner can anyone advice me something?
Move the input before the logo container.
Add this to #header_conteiner:
float: left;
clear: both;
So result is this:
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
float: left;
clear: both;
}
logo_container is a div, a block element. Meaning it takes up the horizontal space in its container; the next HTML element will be forced below it. As logo_container is set to 100px, the same as header_conteiner, there is no vertical space left for your input box. It is forced below logo_container.
To fix the problem, you could make logo_container an inline element and float it left. Inline elements can sit next to each other, whilst block-line elements need their own horizontal space.
CSS display property: http://www.w3schools.com/cssref/pr_class_display.asp
it looks like logo_container has a padding on top of 3px
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}