I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.
Thanks
<div id=”page”>
<div id=”container”>
</div>
<div id=”main”>
<div id=”content”>
</div>
<div id=”side”>
</div>
</div>
</div>
This is my CSS code
#page
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}
#side
{
width:250px;
margin:5px;
float:left;
}
The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):
<div style="clear: both;"></div>
You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.
To contain child floats, the easiest is to apply overflow: auto.
So try this:
#page {
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
overflow: auto;
}
What I believe is happening is when you assign something a float, its "height" doesn't truly get represented to its parent element. Your page div now thinks that it has a height of nothing because of the floating elements within. Add a <br style="clear:both;height:1px" /> after you "side" div. Adding this will "clear" the floated div so their height is not fully represented.
This may not be your case, however I ran into this issue a few times myself and this usually fixed it.
<html><head>
<style type="text/css">
#page
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}
#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>
<body>
<div id="page">
<div id="container">
</div>
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I want to know how do you guys make the header-side-main-footer layout in html.
Like this:
<html>
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</html>
The div.header and the div.footer have a fixed height. And the div.content will hold all the rest height,no scroll bar for the body.
And the div.side will have a fixed width,and the div.main will hold all the rest width.
The div.side can have y-scroll bar.
When the window resize,the div.content will expand to fix the height,no scroll bar.
BTW,sometimes the div.side and the div.main may exchange the position like this:
<html>
<div class="header"></div>
<div class="content">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="footer"></div>
</html>
How to you make it?
update:
div.main can not made as overflow:hidden,since it is the container which I use for ceate the map.
var map=new google.maps.Map('main',{});
Gave div.side a height and width and then overflow:scroll
Like:
div.side{
height:60%;
width: 60%;
overflow: scroll;
}
and div.content overflow:hidden
That is how I would do it in html, well I would add a wrapper around it to make centering easy, but that is just me. I think you want to know about the css, and to be hones, there are going to be many ways one might go about that, the simples being:
.header {
width:whateverpx;
margin:0 auto;
}
.content {
width:100%;
position:relative;
}
.content:after {
clear:both;
content:"";
display:none;
}
.side {
float:left;
position:relative;
width: your width for it;
}
.main {
float:left;
position:relative;
}
.footer {
height: whateverpx;
width: whateverpx;
margin:0 auto;
}
and, if you want the content centered add a wrapper around it and add
.wrapper {
width:whatever;
marging:0 auto;
}
or
no wrapper, do this for .content instead
.content {
width: whatever
margin:0 auto;
position:relative;
}
I am trying to make an element container within the main container of my website. To make the element container in a line, I applied float:left; to them. But when I added float to them,the main container shrinks! I tried applying clear:both to the main container, but nothing changes.
CSS :
#main_container
{
clear:both;
margin-top:20px;
padding:20px 10px 30px 15px;
background:#ccc;
}
.element_container
{
float:left;
width:238px;
height:300px;
border:1px solid #000;
}
HTML :
<div id="main_container">
<div class="element_container"></div>
<div class="element_container"></div>
<div class="element_container"></div>
</div>
Try adding:
overflow: auto;
to #main_container
EDIT: As an alternative float clearing method you can use :after, as explained here.
Add overflow: hidden; to main container -
#main_container
{
clear:both;
margin-top:20px;
padding:20px 10px 30px 15px;
background:#ccc;
overflow: hidden;
}
Try giving the width of the div to 100%.
Maybe this will help.
Hi now two option of this solution now do this
first is
<div id="main_container">
<div class="element_container"></div>
<div class="element_container"></div>
<div class="element_container"></div>
<div class="" style="clear:both;"></div> // add this in your html
</div>
now second is define your main Container Overflow
#main_container{
overflow:hidden;
}
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.
There is probably a simple answer, but I can't seem to figure it out.
Code:
<body>
<div class='left'>
</div>
<div class='right'>
</div>
</body>
I want .left to be width:100px and .right to be the remaining width of <body>, but for the life of me, I can't get it.
I have:
<style>
.left{
float:left;
width:100px;
}
body{
width:100%;
height:100%;
}
.right{
float:left;
width:85%;
}
</style>
But of course 85% won't fill <body>. Any suggestions? I know it's simple.
.right { margin: 0 0 0 100px; } /* remove the float and width */
This will not work if you have elements inside .right which clear, otherwise it will.