I'm trying to put some divs on the website, so it looks neat. There's one big div "container" and inside we have div "head", below it there's an empty div just to separate things and underneath it there's a div "content". My problem is: "head" is easily centered with "margin: 0 auto;", but the same line doesn't work in "content".
#container
{
background-color: darkorange;
width: 70%;
height: 800px;
margin-left: auto;
margin-right: auto;
}
#head
{
background-color: lightblue;
width: 95%;
height: 80px;
margin: 0 auto;
}
.space
{
width: auto;
height: 10px;
background-color: red;
}
#content
{
background-color: forestgreen;
width: 95%;
height: 600px;
margin: 0 auto;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
Any idea why? (the colors are there just to see how it looks, please just ignore them)
And the second question, similar problem. Inside "head" there are three small divs that I want to float to left. Two of them behave as I want, the first one isn't even showed on the website. Here's the css for those three bits:
#reg_welcome
{
background-color: royalblue;
float: left;
width: 100px;
height: 75px;
margin-right: 40px;
}
#logo
{
background-color: springgreen;
width: 300px;
height: 75px;
float: left;
}
#login_out
{
background-color: teal;
float: left;
width: 120px;
height: 75px;
margin-left: 40px;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
The oddest thing is here it all seems to work perfectly, but when ran on localhost, I have the problems I mentioned. Any idea why it happens?
Related
I am new to CSS and I came across a coding question where I had to create three boxes one inside the other. Below is my code. As of now it only creates two boxes. What changes should I make in my code to include the third box.
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second {
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: black;
}
#first #second #third {
position: relative;
width: 25%;
height: 25%;
margin: auto;
margin-top: 25%;
background: orange;
}
<body>
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
</body>
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#second {
position: relative;
width: 50px;
height: 50px;
margin: auto;
margin-top: 25px;
background: black;
overflow: hidden;
}
#third {
width: 12.5px;
height: 12.5px;
margin-top: 18.75px;
margin-left: 18.75px;
background: orange;
}
<body>
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div>
</body>
You missed to place the #third div inside #second div. Try placing it inside the second one. Try this one.
<body>
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
</body>
It's not a matter of css rather html.
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
In the code above. Third is the child of Second and Second is child of First.
I am trying to make a float layout using CSS with the following code
<html>
<head>
<link rel="stylesheet" type'text/css" href="styles.css">
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
<div id="content">
<h1>content</h1>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
And the associated CSS code:
#header
{
float: left;
background-color: #EAE5DF;
width: 80%;
height: 175px;
}
#authentification
{
width: 20%;
height: 175px;
background-color: #8A5D1D;
float: right;
}
#cart
{
width: 20%;
min-height: 400px;
background-color: #861825;
float: right;
}
#content
{
width: 80%;
min-height: 400px;
background-color: #EAE5DF;
float: left;
overflow: hidden;
}
#footer
{
width: 100%;
min-height: 50px;
background-color: #8A5D1D;
clear: both;
display: table;
}
Now the problem is that the code above displays the the divs as they are meant to be display but however leaves a blank space at the bottom.
What I am trying to do is figure out how to get rid of the white space by:
1) Having footer at the bottom of the page
2) when the div 'content' or 'cart' gets more element than the other, both of them should be the same height of course.
I'd appreciate help.
When you want to have divs side by side it is not a good idel to do this by float, Instead use flex.
.wrapper{display: flex;}
#authentification, #cart{width:20%; background-color: #bbb;}
#header, #content{flex: 1; background-color: #eee;}
#footer{background-color: orange;}
h1{margin: 0;}
<div class="wrapper" style="height:100px;">
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
</div>
<div class="wrapper" style="height: calc(100vh - 150px);">
<div id="content">
<h1>content</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
</div>
<div id="footer" style="height: 50px;">
<h1>footer</h1>
</div>
I have div(class name:xyz)to insert small 4 divs (class name:ax )in it.
I need to insert the first two divs vertically, the third one should come next to first one horizontally and the fourth one should come next to the third vertically.
But all the children are appearing vertically in side the parent.
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
You can use CSS3 Multiple column layout which in your case will be column-count: 2;, this property works in following browsers.
.xyz {
max-height: 450px;
max-width: 500px;
column-count: 2;
-webkit-column-count: 2;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
display:inline-block;
}
<div class="xyz">
<div class="ax">1</div>
<div class="ax">2</div>
<div class="ax">3</div>
<div class="ax">4</div>
</div>
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float: left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
Like this?
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float:left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div style="clear:both"></div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
I think you are looking for this one , try with snippet
.xyz {
max-height: 450px;
max-width: 500px;
margin-right: -25px; /* newly added */
margin-left: -25px; /* newly added */
}
.ax {
height: 200px;
width: 200px;
margin: 0 25px 25px 25px;
background-color: #C0C0C0;
float:left; /* newly added */
}
<div class="xyz">
<div class="ax">1 </div>
<div class="ax">2 </div>
<div class="ax">3 </div>
<div class="ax">4 </div>
</div>
Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.
Wrap the sidebars with a parent element which you add the float:right CSS too
#wrapper {
width: 90%;
}
#header {
width: 100%;
height: 50px;
background-color: lightblue;
}
#content {
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top: 4px;
background-color: yellow;
}
#content >p {
margin-right: 100px;
margin-top: 0px;
}
.sidebarGroup {
width: 100px;
float: right;
}
.sidebar {
width: 100px;
margin-top: 4px;
background-color: pink;
}
#footer {
width: 100%;
height: 40px;
margin-top: 4px;
background-color: red;
}
<div id="Wrapper">
<div id="header">
header
</div>
<div class="sidebarGroup">
<div class="sidebar">
Text
<br/>Sidebar
</div>
<div class="sidebar">
Text
<br/>Sidebar
</div>
</div>
<div id="content">
<p>
Stuff
<br/>text
<br/>Just to fill some space
</p>
</div>
<div id="footer">
footer
</div>
</div>
This is practically what frameworks like Bootstrap were made for, but:
<div id="page">
<div id="header">
header
</div>
<div id="content-wrapper">
<div id="sidebar">
<div class="sidebar-box">
I am sidebar content
</div>
<div class="sidebar-box">
I am also sidebar content
</div>
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div class="clearfix">
</div>
</div>
<div id="footer">
footer
</div>
</div>
and then:
#header {
background: red;
}
#content {
background: blue;
width: calc(100% - 104px);
}
#sidebar {
width: 100px;
float: right;
}
.sidebar-box {
background: green;
}
#footer {
background: yellow;
margin-top: 4px;
}
#content-wrapper {
margin-top: 4px;
}
#content:after {
content:'';
display:table;
clear:both;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/
How to put three divs on the same line using css?
<div style="width: 100%; height: 30%; background-color: aqua; padding: 0; margin: 0">
<div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 0%;padding:0;margin-top:0">
<%--left--%>
</div>
<div style="height: 30%; width: 60%; background-color: #4cff00; margin-left: 20%;padding:0;margin-top:0">
<%--center--%>
</div>
<div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 80%;padding:0;margin-top:0">
<%--right--%>
</div>
</div>
Edit:
You can use display: flex; and there won't be any white space
JS Fiddle
.container {
display: flex;
}
.box {
width: 20%;
background-color: yellow;
text-align: center;
}
#center {
background-color: green;
width: 60%;
}
<div class="container">
<div class="box">
<%--left--%>
</div>
<div class="box" id="center">
<%--center--%>
</div>
<div class="box">
<%--right--%>
</div>
</div>
Remove all inline styles (except widths) and use simply:
<style>
div {overflow: hidden}
div > div {float: left;}
/* remove these lines, just for test */
div > div {background: yellow}
div + div {background: green}
div + div + div {background: red}
</style>
<div>
<div style="width: 20%;">
<%--left--%>
</div>
<div style="width: 60%;">
<%--center--%>
</div>
<div style="width: 20%;">
<%--right--%>
</div>
</div>
http://jsfiddle.net/qukpcq8f/
I've left widths as inline styles, I mean it's easier to you to understand. You should move them into external styles.