There is a little white gap on the downside of mainBox, what is it and which cause it?
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
}
#wrapper {
width: 900px;
margin: 0px auto;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#container {
width: 100%;
height: 100px;
background: black;
}
#mainBox {
width: 75%;
height: 150px;
background: blue;
float: left;
}
#sideBox {
width: 25%;
height: 100px;
background: yellow;
float: left;
}
#footer {
clear: both;
width: 100%;
height: 50px;
background: white;
}
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
Add border: none to #container
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
border: none; /**** Add this extra line ****/
width:100%;
height:100px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
You have a white gap here because your blue div (#mainBox) is 150px, which is taller than its container div (#container), set at 100px. This has caused the #mainBox div to extend outside the container with a slight offset at the leftmost side due to the black border applied to the div.
There are a number of ways to correct this gap, such as removing the border or the hardcoded height values.
It is because #sideBox have 100px height and #mainBox have 150px height. Make both same solve your issue.
Here i set #sideBox to height:150px;
And you have given parent container #container to height:100px and child to height:150px.
Edit:
I think i misunderstood your issue before. But as i say above. Your parent height is small then your child. Make it proper solve your issue.
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
width:100%;
height:150px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
Related
I have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.
<style type="text/css">
.container{
position:center;
margin-left:500px;
margin-right:500px;
}
header {
height:200px;
background-color:green;
}
footer {
height:100px;
background-color:red;
}
.body {
display:flex;
flex-direction:row;
height:650px;
}
.side {
background-color:yellow;
flex:0.5;
}
.middle {
background-color:teal;
flex:2;
}
</style>
</head>
<body>
<div class="container">
<header> I'm a header idiot</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
I'm trying to make a webpage that is formatted similarly to this:
The code I have currently is a very botchy, way of doing it but doesn't scale with window size and only looks good full screen relative to my screen size. What am I missing? It is supposed to be centered on the page and not have its width spread across the whole screen.
You have to remove just:
.container {
margin-left: 500px;
margin-right: 500px;
}
from your code will solved your issue.
Check Fiddle
And for getting output same as image(like center div). Give parent text-align:center;. Here body is parent so.
body{
text-align:center;
}
Check Updated Fiddle
<!DOCTYPE html>
<style>
#main{
height:500px;
width:100%;
}
#div1{
width:99%;
height:25%;
border: 2px solid;
margin-bottom:2%;
top: 30px;
}
#div2{
width:20%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:left;
}
#div3{
width:78%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:right;
}
#div4{
width:100%;
height:10%;
border: 2px solid;
float:left;
}
</style>
<body>
<div id="main">
<div id="div1">11
</div>
<div id="div2">33
</div>
<div id="div3">222
</div>
<div id="div4">
test
</div>
</div>
</body>
</html>
Description:- You jsut nedd to give margin for adjusting all layouts and need to remove (.container) Class .Below is code you can check that.
Code:-
<style type="text/css">
.body {
display:flex;
flex-direction:row;
height:650px;
}
header {
height:200px;
background-color:green;
margin:20px 20px 0px 20px;
}
footer {
height:100px;
background-color:red;
margin:15px 20px 0px 20px;
}
.side {
background-color:yellow;
flex:0.5;
margin:15px 10px 0px 20px;
}
.middle {
background-color:teal;
margin:15px 20px 0px 10px;
flex:2;
}
</style>
</head>
<body>
<div >
<header> I'm a header bitch</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
Change your .container to this. You can use any width you like.
.container {
/* position:center; */
margin-left:auto;
margin-right:auto;
width:100%
}
.container {
/* position:center; */
margin-left: auto;
margin-right: auto;
width: 100%
}
header {
height: 200px;
background-color: green;
}
footer {
height: 100px;
background-color: red;
}
.body {
display: flex;
flex-direction: row;
height: 650px;
}
.side {
background-color: yellow;
flex: 0.5;
}
.middle {
background-color: teal;
flex: 2;
}
<div class="container">
<header>I'm a header</header>
<div class="body">
<div class="side">Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>footer</footer>
</div>
In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>
If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)
I have this Tow column page layout || but the problem that the footer is for the whole file
what if I want the footer to be under the right column only as the black footer in this image
I tried to chand the part
footer content
but it didnt came in the place I wanted
<style>
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:60px; /*This must equal the height of your header*/
}
#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}
#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}
#side-stuff{
display: block;
}
#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}
#content-stuff{
width: auto;
height: auto;
}
#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>
<div id="content">
<div id="content-stuff">
content stuff
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</div>
Hope this helps
<style>
#wrapper{
margin:0px auto;
padding:0px;
width:1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:lavender;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
margin:0px;
padding:0px;
width:250px;
height:700px;
background-color:grey;
float:left;
}
#main
{
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:pink;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:black;
float:right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side">Side</div>
<div id="main">
<div id="main1">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
put the div of the footer inside the div of the side
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
<div id="footer">
footer content
</div>
</div>
I have been trying to center this image inside its div, but it keeps aligning to the left.
HTML
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
I have tried using margin: auto; and align:middle; but neither seem to work.
No need for relative/absolute positioning.
A simple way to solve this is by setting display:block on the image.
jsFiddle demo - it works perfectly.
CSS
#main #right img {
margin: 0px auto;
display: block;
}
Try this:
HTML:
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS:
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
text-align:center;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
Jsfiddle: http://jsfiddle.net/hdMEQ/
I basically just added text-align: center; property in #right id.
Try adding:
#right img {
margin:auto;
display:block;
}
JSfiddle
Will get you the dead center with variable width and height or no need to know widths, heights.
set the position absolute in relative to which div you want the center the image
#main #right img {
position:absolute;
display: block;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
#right {
position:relative;
}
<style type="text/css">
.centerDiv {
margin-right: auto;
margin-left: auto;
width: 80px;
}
</style>
<div id="main">
<div id="left">This is a test</div>
<div id="right" class="centerDiv">
<div class="centerDiv">
<h2 id="fish">Fishtail</h2>
<img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
</div>
</div>
</div>
</body>
</html>