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;
}
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.
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.
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 have this simple website
<div style=" position: relative; margin-right: 40px;">
<div style="float: left; width: 100px; position: relative;">Middle Stuff</div>
<div style="float: right; width: 200px; position: relative; margin-right: 40px;">Right Stuff</div>
<br style="clear: left;" />
</div>
and I want that the middle stuff-box-width grow up when I resize the window so that between the middle stuff-box and the right stuff-box is no empty content.
How can I get this "effect"?
As mentioned in the comments, you can achieve this with percentage widths. Be carful though, if you leave your margins at fixed widths then the layout can break.
<div style=" position: relative; margin-right: 40px;">
<div style="float: left; width: 58%; position: relative; margin-right:2%;" class="middle-div">Middle Stuff</div>
<div style="float: right; width: 38%; position: relative; margin-right: 2%;" class="right-div">Right Stuff</div>
<br style="clear: left;" />
</div>
Here's a Fiddle
Also, you should really try to avoid using inline styles like this. Instead, I'd recommend something along the lines of:
/* CSS in style.css */
.parent-div {
position: relative;
margin-right: 40%;
}
.middle-div, .right-div {
position: relative;
float: left;
}
.middle-div {
width: 58%;
margin-right: 2%;
}
.right-div {
width: 38%;
margin-right: 2%;
}
Then your markup can be reduced to:
<div class="parent-div">
<div class="middle-div">Middle DIV</div>
<div class="right-div">Right DIV</div>
<br style="clear: left;" />
</div>
<div style="position: relative; margin-right: 40px; width: 100%;">
<div style="float: left; width: 60%; position: relative; border: 1px solid #000;">Middle Stuff</div>
<div style="float: left; width: 200px; position: relative; margin-right: 40px;margin-left: 10px; border: 1px solid #000;">Right Stuff</div>
<br style="clear: left;" />
</div>
Try this you will get a fix size for second box as 200px while 60% for first box.
As per your image you need left column fluid and right one fixed: Demo
<div id="outerdiv">
<div id="right">Right Stuff</div>
<div id="left">Middle Stuff</div>
</div>
#outerdiv {
position: relative;
margin-right: 40px;
width: 100%;
}
#left {
float: left;
width: 55%;
position: relative;
border: 1px solid #000;
}
#right {
float: right;
width: 30%;
position: relative;
margin-right: 40px;
border: 1px solid #000;
}
Or you can use responsive grid system like this
demo