I would like to have two divs sit next to each other. Both divs have their width set to a certain percentage. Between the two divs I want a fixed width margin of 20px. The width of div1 and div2 and the 20px margin should add up to 100% of the available space. (See screenshot below)
Heres a basic jsfiddle to get started: jsfiddle
code for jsfiddle link to work
Is this possible without javascript?
Easiest, safest way I know to do something like this is a nested <div>, using the outside div as a container for layout purposes. See here: http://jsfiddle.net/u7VzB/1/
HTML
<div id="container">
<div id="div1">div#1</div>
<div id="div2">
<div>div#2 inner</div>
</div>
</div>
CSS:
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 30%;
background-color: black;
}
#div2
{
float: left;
width: 70%;
}
#div2 > div {
margin-left: 20px;
background-color: blue;
}
You can also do something like this without disturbing HTML code:
#container {
color: white;
margin-top: 50px;
position: relative;
}
#div1 {
float: left;
width: 30%;
background-color: black;
}
#div2 {
float: left;
position:absolute;
left: 30%;
margin-left: 20px;
right: 0px;
background-color: blue;
}
Working Fiddle
try by setting float left, right and reduce the width
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 29%;
background-color: black;
}
#div2
{
float: right;
width: 69%;
background-color: blue;
}
Related
I experienced a problem with placing divs. The divs "menu" and "content" are meant to be next to each other. They were, until i tried to set their width using % instead of px. After applying that change the effect of 'float: left;' was cancelled. I tried changing the order of parameters in css file, but it didn't work. I want them to maintain the 20/80 ratio, while still being next to each other. Can i achieve that using this method, or am i missing some information, and these can't be used on the same div?
#menu {
background-color: lightgray;
width: 20%;
min-height: 600px;
padding: 10px;
text-align: center;
float: left;
}
#content {
background-color: gray;
width: 80%;
min-height: 600px;
padding: 10px;
float: left;
}
<div id="menu">
menu
</div>
<div id="content">
content
</div>
Seems like your padding is breaking the line because you are filling the 100% of the space.
See https://jsfiddle.net/6dfs27u8/1/
#menu{
float: left;
background-color: lightgray;
width: 20%;
text-align: center;
height: 600px;
}
#content
{
float: right;
background-color: gray;
width: 80%;
height: 600px;
}
I have two containers, one has a width of 30% and the other has a width of 70% however they are not inline, instead one moves lower and by passes the other container as seen in the screenshot below how can i fix this?
main {
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
width: 30%;
}
Here is the Screenshot
http://prntscr.com/jdsy9b
Thanks
Try giving .main box-sizing: border-box;
.main {
box-sizing: border-box;
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
This way you tell the browser to account for padding, you can read more about it in the docs.
The padding actually increases the box width and height
Here i removed the padding and added some height just to see the boxes.
.main {
background-color: #f2f2f2;
height:100px;
float: right;
width: 70%;
}
.aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
height:100px;
width: 30%;
}
<div class="main"></div>
<div class="aside"> </div>
In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I'm using this code...
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
/** Styling **/
#app {
border:1px solid #666;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:10px;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
}
However, it's not working like I want it to.
I want to add a border around it, but its not working (and its moving the content down).
You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.
Here's a live jsfiddle link of your above snippets with the overflow:hidden assigned:
http://jsfiddle.net/AhZAU/
The spacing at the top, "(and its moving the content down)", is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/
The QuirksMode Way©:
#app {
border:1px solid #666;
overflow: auto;
width: 100%;
}
http://jsfiddle.net/CePt6/
From the article:
If you want to add, say, a border
around all floats (ie. a border around
the container)...
NOTE
As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
http://jsfiddle.net/CePt6/2/
EDIT
Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:
#app {
border:1px solid #666;
overflow: auto;
width: 900px;
}
http://jsfiddle.net/CePt6/3/
Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
CSS:
#app {
border:1px solid #666;
clear:both;
position:absolute;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:0px;
}
#app-content {
float: left;
color: #333;
background: red;
height: 350px;
width: 725px;
display: inline;
left:200px;
top:75px;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
top:65px;
}
this should do the trick. jsfiddle.net demo
#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}
Here's what you can do:
Add the following lines to your #app div like this:
width:900px;
min-height: 300px;
overflow:auto;
The above is meant to auto-expand the outer div as the inner contents increase in length.
This however will be a restriction on older versions of IE since they did not have the min-height property.