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
Related
I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
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/
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/
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.