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?
Related
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);
}
HTML
<div class="whole">
<div class="fst"></div>
<div class="sec"></div>
<div class="thd"></div>
</div>
CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
}
.thd {
float: right;
width: 20px;
background: blue;
}
Is there a way to stretch the div.sec to fit with the area left by div.fst and div.thd in any screen size? The width of div.fst and div.thd is fix in pixel.
Is there any solution with only css?
Really appreciate your helps!
Please see my fiddle http://jsfiddle.net/vHHcf/
This seems to be what you want.
jsFiddle example
Given that you said .fst and .thd have fixed widths, you can use calc() to subtract the 40px value from 100%.
.sec { width:calc(100% - 40px); }
Updated CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
width:calc(100% - 40px);
}
.thd {
float: right;
width: 20px;
background: blue;
}
html
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
css
#container {
width: 500px;
height: 500px;
background-color: red;
}
#one {
width: 340px;
height: 100px;
margin: 20px;
background-color: green;
float: left;
}
#two {
width: 100px;
height: 100px;
margin: 20px 20px 20px 0px;
background-color: blue;
float: right;
}
This is what i want to do: http://jsfiddle.net/p4ZAd/
I want to make a margin of 20px between the two divs and this is how far Iv'e gotten, but is it possible to do it any other way?
What i would idealy like is to remove the width on the "#one" completely and just have it be maximum size with a margin towards the "#two".
LIke this
working fiddle
css
*{
margin:0;
padding:0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
display:table;
}
#one {
background-color: green;
display:table-cell;
}
#two {
background-color: blue;
display:table-cell;
}
You can use table and table-cell display types to mimic how a table works. Then use border-spacing to accomplish the margin in-between cells.
HTML:
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
CSS:
#container {
display: table;
width: 500px;
height: 400px;
background-color: red;
border-spacing: 20px;
}
#one {
display: table-cell;
background-color: green;
}
#two {
display: table-cell;
width: 100px;
background-color: blue;
}
JSFiddle here
Here's a list of browsers that support display: table;
You can set padding on #container and then set negative right margin for #two. Example:
#container {
width: 360px;
height: 500px;
background-color: red;
padding: 20px 140px 20px 20px;
}
#one {
height: 100px;
background-color: green;
float: left;
width: 100%;
}
#two {
width: 100px;
height: 100px;
margin: 0 -120px 0 0;
background-color: blue;
float: right;
}
Working sample: http://jsfiddle.net/SytvY/1/
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.