I have a website in which the layout look something like the following:
The css for the main content is as follows:
.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}
The problem is whenver I resize the browser, the main content div instead of staying there and the browser getting horizontal scrollbars
moves down automatically.
If I resize the browser back to its original size, the main div doesn't even come back to its original place. How do I correct this thing?
Add the two elements (left,right) inside a container div, and give this container a min-width
<head>
<style type="text/css">
body {
min-width:750px;
min-height:500px;
}
div.container {
min-width:600px;
min-height:450px;
}
div.left, div.right {
min-height:400px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
This is two column full screen layout with colorized column background (if necessary) & jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#ccc;
}
#header {
background-color:#ccf;
}
#container {
position:relative;
min-height:80%;
border:4px solid red;
overflow:hidden;
}
#left {
float:left;
width:200px;
background-color:#cfc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#main {
position:relative;
margin-left:200px;
background-color:#ffc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#footer {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="left">LEFT</div>
<div id="main">MAIN</div>
<div style="clear:both"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I have a simple page with one main div that contains two divs (left_menu and content) and another div outside the main div that contains the footer.
The actual page appearance is the following:
As you can see, there is a white space between the footer and the other divs. My question is how to remove it.
I tried some solutions presented in other questions (as add vertical-align: top; to the footer's CSS, but it didn't work).
You can find the whole HTML and CSS code below.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
position:relative;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
Ok, I am basically building a fluid layout.
My HTML is like this:
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="center">This text is long and can get longer</div>
<div class="box" id="right">Right</div>
<div class="clear"></div>
</div>
Here is the css:
#container{
width: 100%;
}
.box{
float: left;
}
#left, #right{
width: 100px;
}
#center{
width: auto; /* ? */
overflow: hidden;
}
.clear{
clear:both;
}
What I need to know is how do I get the #center to re-size when #container is re-sized without the elements moving underneath each other.
Try these corrections (just simple floating elements, no need to set absolute elems or paddings)
just added a new fiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fluid layout</title>
<style>
/*class to set the width of the columns */
.floatbox{
width:100px;
}
#container{
width: 100%;
float:left;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
overflow: hidden;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<!-- floating column to the right, it must be placed BEFORE the left one -->
<div class="floatbox" id="right">Right</div>
<div class="floatbox" id="left">Left</div>
<!-- central column, it takes automatically the remaining width, no need to declare further css rules -->
<div id="center">This text is long and can get longer</div>
<!-- footer, beneath everything, css is ok -->
<div class="clear"></div>
</div>
</body>
</html>
#container also must be floated (or with overflow: auto/hidden) to achieve it.
I strongly suggest you use some of the more well known fluid solutions: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html
The easiest way to do this and completely avoid the float issues that arise would be to
use padding on the container and absolute position the left/right elements in the padding area. (demo at http://www.jsfiddle.net/gaby/8gKWq/1)
Html
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="right">Right</div>
<div class="box" id="centre">This text is long and can get longer</div>
</div>
The order of the divs does not matter anymore..
Css
#container{
padding:0 100px;
position:relative;
}
.box{
/*style the boxes here*/
}
#left, #right{
width: 100px;
position:absolute;
}
#left{left:0;top:0;}
#right{right:0;top:0;}
#center{
/*anything specific to the center box should go here.*/
}
We have a iamge banner on our web page that is a gradient that is repeated on the x-axis. The problem is, if our content on our web page (which is dynamically created based on data in our database) spans a width greater than the window width, then our banner no longer spans the entire width of the document when scrolled. Anyone know how to fix this?
A simple example is posted below. The blue is our "banner" the "red" is our content.
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:1500px;
background-color:red;
}
</style>
</head>
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</html>
Try putting the header inside the content div. Like this:
...
</head>
<div id="content">
<div id="header"></div>
<h1>TEST</h1>
</div>
</html>
Even better, add a wrapper:
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#wrapper {
width:1500px;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:100%;
background-color:red;
}
</style>
</head>
<div id="wrapper">
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</div>
</html>
Setting a min-width on your #header that equals the #content width would do it:
#header{
height:80px;
background-color:blue;
width:100%;
min-width: 1500px;
}
put a
<div id="wrapper"> header & content </div>
around everything... make wrapper position:relative, so 100% header is the width of the wrapper, which will be whatever content is.