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.
Related
I have 2 divs which are children of a parent div, with each of them having a width in percentage (important: I need the width to be in percentage). But the trick is here, I need to align this entire thing to the center of the page which seems impossible using margin auto trick. Please help!
Here's the code so far:
<div class="container" style="display: inline-block; width: 100%;">
<div style="margin: 0px auto;">
<div class="child1" style="width: 40%; float: left; background: lightblue;">Testing Child 1</div>
<div class="child2" style="width: 30%; float: left; background: lightgreen">Testing Child 2</div>
</div>
</div>
You are using floats which will take the elements out of the regular document flow. I defined your .container as a flexbox and centered the children via CSS.
.container {
display: flex;
justify-content: center;
}
.child1 {
width: 40%;
background-color: lightblue;
}
.child2 {
width: 30%;
background-color: lightgreen;
}
<div class="container">
<div class="child1">Testing Child 1</div>
<div class="child2">Testing Child 2</div>
</div>
You can do it with the Flexbox:
.container {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
}
<div class="container">
<div class="child1" style="width: 40%; background: lightblue">Testing Child 1</div>
<div class="child2" style="width: 30%; background: lightgreen">Testing Child 2</div>
</div>
Can you use like this -
<div class="container" style="display: inline-block; width: 100%;text-align: center">
<div style="margin: 0px auto;">
<div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!--
--><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div>
</div>
</div>
May it will work for you :)
Perhaps try this approach:
#box {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="container" style="display: inline-block; width: 100%;text-align: center">
<div id="box" style="margin: 0px auto; width: 100%;">
<div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!--
--><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div>
</div>
</div>
You could add 15% padding on right and left of your container the following way:
.container {
display: inline-block;
width: 100%;
padding: 0 15%;
background: red;
}
.child1 {
float: left;
width: 40%;
background: lightblue;
}
.child2 {
float: left;
width: 30%;
background: lightblue;
}
<div class="container">
<div class="child1">Testing Child 1</div>
<div class="child2">Testing Child 2</div>
</div>
Hope this helps.
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'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?
I use inside of div tag, 4 div tags to divide to 4 equal areas using following tag.
Is there any other way to divide or improve this division
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;">
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
</div>
Use <div style="width: 50%; height: 50%"> for inner divs.
There are no other improvements i can suggest you about styles.
In the other hand, if you want to see divs while designing, i can suggest you to assign them temporary background colors like:
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;background-color:gray">
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:yellow">
</div>
<div style="width: 50%; height: 50%;background-color:red;float: left">
</div>
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:green">
</div>
<div style="width: 50%; height: 50%;background-color:blue;float:left">
</div>
</div>
EDIT: Thanks to background colors, i realised that your floating divs hide other ones. You should add float:left for all inner divs.
Is this your desired effect?
.container {
display: flex;
height: 300px;
}
.container div {
flex: 1;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>
Or is this?
.container {
height: 300px;
width: 300px;
}
.container div {
width: 50%;
height: 50%;
float: left;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>
I want my website to have 3 sections: left center and right.
I want my left section to be 150px, my right section to be 250px and have the center one take all the leftover space. I cant seem to make it happen using css only. Here is the code I though should work:
<div>
<div class="left" style="float: left; width: 150px; background: red">
</div>
<div class="center" style="background: blue;">
</div>
<div class="right" style="background: green; width: 250px; float: right">
</div>
</div>
I am getting that the right section is pushed down as the middle one takes over all the space.
What am I doing wrong?
<div style="overflow:hidden">
<div class="left" style="float: left; width: 150px; background: red">
</div>
<div class="right" style="background: green; width: 250px; float: right">
</div>
<div class="center" style="background: blue; margin-left:150px; margin-right:250px">
</div>
</div>
Hope that helps.
Try this
<div>
<div class="left" style="float: left; position: relative; width: 150px; background: red">
</div>
<div class="center" style="float: left; position: relative; background: blue;">
</div>
<div class="right" style="float: left; position: relative; background: green; width: 250px;">
</div>
</div>
And better, you should start using a css bootstrap like twitter one: http://twitter.github.com/bootstrap/
it handles columns management and it's really easy
<div>
<div class="left" style="float: left; width: 150px; background: red">
</div>
<div class="left center" style="background: blue; float: left; width: 500px">
</div>
<div class="right" style="background: green; width: 250px; float: right">
</div>
</div>
Center must also have a float. You cannot have it without a float unless you use absolute positioning. See updated code above. And really fluid designs ideally are like:
<div style="width:100%>
<div class="left" style="float: left; width: 20%; background: red">
</div>
<div class="left center" style="background: blue; float: left; width: 55%">
</div>
<div class="right" style="background: green; width: 25%; float: right">
</div>
</div>
This is exactly what you are looking for. You only need to adjust the values to your wished sizes.
HTML
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
CSS
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -190px;
}
* html #left {
left: 150px;
}