I have a main div which has another two divs with in, I am trying to put the inner divs side by side. I have trie the following code, but I can't understand why it doesn't work. If apply float to my inner div they just disappear. Here is my code:
<div id="mainContainer">
<div id="leftSide"></div>
<div id="rightSide"> </div>
</div>
body{
background-color: #006847;
}
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
height: 500px;
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
#leftSide{
background-color: #CE1126;
max-width: 40%;
height: 900px;
}
#rightSide{
max-width: 50%;
height: 900px;
background-color: purple;
float: right;
}
Use display:inline-block;
Change the height of your inner divs to 500px since your containers height is 500px.
Change max-width to width. width needs to be specified in order for max-width to work.
If you set a fixed width and a max-width, this means the following:
If the width goes above max-width, keep it at max-width. If the width
is below max-width, keep it on width.
Credits
Change to this:
#leftSide{
background-color: red;
width: 50%;
height: 500px;
display:inline-block;
}
#rightSide{
width: 50%;
height: 500px;
background-color: green;
float: right;
display:inline-block;
}
JSFiddle Demo
You should specify width of container and then use max/min-width to override it,
Try,
body {
background-color: green;
box-sizing: border-box;
margin:0;
padding:0;
}
#mainContainer {
background-color: blue;
width: 95%;
height: 900px;
margin: 0 auto;
box-shadow:10px 10px 5px grey;
margin-top: 50px;
}
#leftSide {
background-color: yellow;
width: 40%;
height: 900px;
float: left;
}
#rightSide {
width: 60%;
height: 900px;
background-color: red;
float: left;
}
Try not making the height of #mainContainer higher than the others:
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
**height: 900px;**
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
I simplified your code and turned it into a JSFiddle. Basically, you don't want floats unless very necessary. Use display:inline-block; instead. http://jsfiddle.net/KybKc/
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>
I have an div container namend "content". This container got a width of 500px;.
Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?
And when I resize the window it should look like this:
Here is the code:
*{
margin: 0px;
padding: 0px;
}
.content{
width: 500px;
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right{
float: right;
width: 50%;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
JFiddle
You should Change Left Width size To 60%
.left{float: left;width: 60%;height: 20px;background-color: blue;}
.right{float: right; width: 40%;height: 20px; background-color: red;}
I think, this will be the best answer for you. please check the given below code snippet.
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
height: 100px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
You want something like this ? You have to resize the window to see the change.
I use calc() function in CSS :
.right{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-left: 10px;
background-color: red;
}
I also use a fluid width for the main container.
See this fiddle
http://jsfiddle.net/7XD8s/300/
.left {
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right {
display: block;
margin-left: 300px;
height: 20px;
background-color: red;
}
No need of calc
http://jsfiddle.net/7XD8s/303/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
overflow: hidden;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
width: 500px;
padding: 5px;
}
.left{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
float: right;
margin: 0px;
width: 300px;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
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?
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/
The html is like:-
<div class="mainWrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Css:-
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-image: url(/image.jpg);
background-repeat: repeat-y;
background-position: top left;
}
The css class "twoColumns" will be added to "mainWrapper" class if div with id=left is present. The background image(of color #363636) will be given to outermost div. If css class(twoColumns) is added in document ready(depending #left presence), it is taking time to bring the image from server. How to add the background image to outermost div depending upon the child div presence? Any idea/suggestion to solve this problem is applauded.
I would suggest placing the image into the wrapper from the start, then removing it under your respective conditions. All this can be easily achieved with a little css change and javascript:
CSS:
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-repeat: repeat-y;
background-position: top left;
}
JS/jQuery:
$(document).ready(function(){
if($(".mainWrapper #left").length == 0){
$(".mainWrapper").css({'background-image':'none'});
}
});
Here is the Fiddle