I want to convert my web page into four section, one horizontal and three vertical. The horizontal section is okay, but there are two issues with vertical sections:
They are not filling the complete screen height.
The third section is overlapping with second section by nearly 10 or 20 pixels.
Here is my CSS:
body{
width: available;
height: available;
}
.container{
width: available;
height: available;
}
.leftpane{
width: 25%;
min-width: 350px;
height: available;
min-height: 400px;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane{
width: 50%;
min-width: 800px;
height: available;
min-height: 650px;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane{
width: available;
height: available;
position: relative;
margin-left: 75%;
background-color: yellow;
border-collapse: collapse;
}
.toppane{
width: available;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
}
And this is the HTML page:
<div class="container">
<div class="toppane">Test Page</div>
<div class="leftpane"><h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane"><h1>Test Page</h1></div>
</div>
My output is this:
And I want it to be like this:
Here is a jsfiddle.
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 25%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
.toppane {
width: 100%;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
}
<div class="container">
<div class="toppane">Test Page</div>
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
Note:
1. I removed all min-width and min-height you don't need these in this case.
2. use height: 100% for your elements also you should set this on body and html tags.
3. left pane should be float: left with width: 25%, right pane float: right width: 25% and middle pane float: left or float: right with width: 50%
that's all!
2022 Update!
Here is updated version via flex:
.container {
width: 100%;
height: 100vh;
}
.toppane {
width: 100%;
height: 100px;
background-color: #4da6ff;
}
.leftpane {
width: 25%;
height: 100vh;
background-color: rosybrown;
}
.middlepane {
width: 50%;
height: 100vh;
background-color: royalblue;
}
.rightpane {
width: 25%;
height: 100vh;
background-color: yellow;
}
body {
margin: 0!important;
}
.d-flex {
display: flex;
}
<div class="container">
<div class="toppane">Test Page</div>
<div class="d-flex">
<div class="leftpane">
<h1>Test Page</h1>
</div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1>
</div>
</div>
</div>
Check here. You'll get the simplest code to divide your screen into three columns.
HTML File
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>Hi</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Aditya</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>This is Working!</p>
</div>
</body>
CSS File
body {
width: 100%;
float: left;
}
.class1,
.class2,
.class3 {
width: 33.33%;
float: left;
height: 100px;
}
p {
padding-top: 25px;
text-align: center;
}
Use the Twitter Bootstrap framework which has a grid system.
EXAMPLE
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center bg-primary" style="height:40px;">Top </div>
</div>
<div class="row">
<div class="col-xs-3 bg-warning" style="height:200px;">left</div>
<div class="col-xs-6 bg-info" style="height:200px;">Center</div>
<div class="col-xs-3 bg-danger" style="height:200px;">Right </div>
</div>
</div>
</body>
</html>
<html> <head> <title>Divide Tab </title> <style> body, html {
width: 100%; height: 100%; margin: 0; }
.container { width: 100%; height: 100%; } .leftpane {
width: 25%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
text-align: center; }
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
text-align: center; }
.rightpane { width: 25%; height: 100%; position: relative;
float: right; background-color: yellow; border-collapse:
collapse; text-align: center; }
.toppane { width: 100%; height: 100px; border-collapse:
collapse; background-color: #4da6ff; text-align: center; }
</style>
</head> <body> <div class="container"> <div
class="toppane"><h2>Top View</h2></div> <div class="leftpane">
<h1>Left View</h1></div> <div class="middlepane"><h2>Middle View</h2></div> <div class="rightpane">
<h1>Right View</h1></div> </div> </body> </html>
Related
How do I make the image responsive and keep it in between the containers left and right.
I have tried putting it all into another container and it doesn’t work.
I know it sounds basic but it really is not.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
How about this way? Is it (close to) what you need? Please check responsiveness too.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
You don't need containers to center something.
It's better to use 1 container that contains everything.
If you want to center your image into a div just use this code:
<div align="center">
<image src="whatever.png"/>
</div>
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>
I have a website with the following structure:
<html>
<body>
<div id="page">
<div id="anyContent"></div>
<div id="pagecontent">
<div id="bigContent"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
bigContent is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.
How can I force the footer to have the same width as bigContent?
See my example jsFiddle.
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#page {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
height: 3000px;
width: 5000px;
}
#footer {
background: blue;
clear: left;
bottom: 0px;
width: 100%;
height: 100px;
}
You can set some properties to #pagecontent then it will work as per your need:
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#pagecontent {
float: left;
position: relative;
}
#pagecontainer {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
}
#footer {
background: blue;
height: 25px;
width: 100%;
}
<div id="pagecontainer">
<div id="anyContent"> </div>
<div id="pagecontent">
<div id="bigContent" style="width:500px; height:150px;"></div>
<div id="footer"></div>
</div>
</div>
You have set the width: 5000px and height to 3000px.
<div id="bigContent" style="width:5000px; height:3000px;"></div>
Try this
<div id="bigContent"></div>
and add
#bigContent {
background: yellow;
height: 1000px;
width: 100%;
}
FIDDLE
You set width to #bigContent, better would be to set this width to #pagecontent.
<div id="pagecontainer">
<div id="anyContent"></div>
<div id="pagecontent" style="width:5000px;">
<div id="bigContent" style="height:3000px;"></div>
<div id="footer"></div>
</div>
</div>
http://jsfiddle.net/47hb3fcn/3/
How to create this html layout using div tags? I'm trying this code. But it is not working. How should i position my leftbottom div? What is wrong on my code? Please help me......... Hurry..... thanks
<html>
<head>
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
}
.leftupper{
width: 350px;
height: 241px;
background: red;
float: left;
clear: right;
}
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.leftbottom{
width: 350px;
height: 200px;
float: left;
background-color: red
}
</style>
</head>
<body>
<div class="container">
<div class="leftupper">
</div>
<div class="gallery"></div>
<div class="leftbottom"></div>
</div>
</body>
</html>
Try to change
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
To
.gallery{
width: 630px;
height: 600px;
background: red;
float: right;
margin-left: 10px;
margin-right: 10px;
}
http://jsfiddle.net/tuekdzph/1/
You should use coloumns like this:
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
overflow: auto; /* clear floats */
}
.left { float: left; width: 350px; }
.right { float: left; width: 630px; }
.left-upper{
width: 100%;
height: 241px;
background: red;
}
.gallery{
width: 100%;
height: 600px;
background: red;
}
.left-bottom{
height: 200px;
background-color: red
}
</style>
Your HTML should look like this:
<div class="container">
<div class="left">
<div class="left-upper"></div>
<div class="left-bottom"></div>
</div>
<div class="right">
<div class="gallery"></div>
</div>
</div>
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/
HTML
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
</div>
CSS
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.panel {
background-color: red;
}
Question:
How can I add another div that I can place under div.right? The div that I want to place under .right will be .under_right and the CSS is:
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
}
http://jsfiddle.net/daQ22/2/
Add:
clear:both;
float:right;
to under_right
Working DEMO
Add a div in html like this:
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">Blue</div>
<div class="new_div">New</div> <-- Added this new div here
</div>
and use this CSS:
.new_div { background-color: white; width:320px; float: right; }
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
<div class="underright"></div>
</div>
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
float: right;
}
As long as the div .underright is underneath div .right, the float will obey that structure.
Edit Just a quick note, perhaps adding display: block; to the css will help, especially if you change the size of the outer container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
margin-top:30px;
background-color: gold;
}
.panel {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">
<div class="under_right">It is under right.</div>
</div>
</div>
</body>
</html>