I am trying to make this layout....
I have everything pretty much laid out but the different boxes are dropping down when I resize the browser window. I want them to stay where they are and scale.
I am trying to get it to work using display:inline-block.
<body>
<header>header</header>
<article>
<div class="col_left">
<div class="col_left_top margin_18bot">img</div>
<div class="col_left_bot">box1</div>
<div class="col_left_bot margin_18left_18bot">box2</div>
</div>
<div class="col_right margin_18left_18bot">box3</div>
</article>
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.margin_18left_18bot {
margin: 0px 0px 18px 18px;
}
.margin_18bot {
margin: 0px 0px 18px 0px;
}
body {
max-width: 1080px;
min-width: 850px;
margin: auto;
}
header {
background-color: brown;
height: 153px;
}
article {
padding: 18px;
}
.col_left {
float: left;
width: 66.3%;
max-width: 690px;
}
.col_left_top {
width: 100%;
height: 600px;
max-height: 600px;
max-width: 690px;
background-color: aqua;
}
.col_left_bot {
display: inline-block;
vertical-align: top;
width: 48.697912%;
background-color: aquamarine;
min-height: 300px;
max-width: 336px;
}
.col_right {
display: inline-block;
width: 32.1854%;
background-color: red;
height: 1070px;
max-width: 336px;
}
Here is a fiddle.... *fixed fiddle wasnt showing properly before
The problem you're having is because you are setting their width in percent yet you define those margins in px which will eventually won't have a total of width of 100% when you scale down.
To fix this, you have to do the following:
Change this :
.col_left {
float: left;
width: 66.3%;
max-width: 690px;
}
.col_right {
display: inline-block;
width: 32.1854%;
background-color: red;
height: 1070px;
max-width: 336px;
}
To:
.col_left {
float: left;
width: calc(67% - 9px);
max-width: 690px;
}
.col_right {
display: inline-block;
width: calc(33% - 9px);
background-color: red;
height: 1070px;
max-width: 336px;
}
The reason I use :
calc(33% - 9px); and width: calc(67% - 9px);
is because the margin-left is 18px so we have to divide it by two.
Also when doing an inline-block take note that if you format your structure like below, you will have a space between them because of the newline:
<div class="col_left_bot">box1</div>
<div class="col_left_bot margin_18left_18bot">box2</div>
To fix that, get rid of the newline. It will get ugly, but it will do the trick
<div class="col_left_bot">box1</div><div class="col_left_bot margin_18left_18bot">box2</div>
Update to give further explanation regarding the issue on percentage with a margin set as px
Let's say you have 100px container and 49% width on 2 elements with 2px margin.
Let's compute :
100 * .49 x 2 + 2 = 100 // correct for this scale
But what if the container scales down to 50px?
Computation :
50 * .49 x 2 + 2 = 51 // it doesn't total to 50px
Which is why your other elements go down when the container scales down.
Fiddle
Related
I am trying to make a div fill the possible place after its margins taking effect.
For example if the screen width is 200 and the class is declared as below:
.mini_video {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Can the mini_video have 160px width and be in the middle?
I am also using Bootstrap if it can help me in any way.
I'd be using padding for this use case. You could use an outside container and add padding to it for the video. Object-fit on the video allows it to scale progressively.
.mini_video-container {
width: 100%;
padding: 0 20px;
max-width: 1000px;
background-color: orange;
}
video {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: fill;
}
https://codepen.io/jeffteachestheweb/pen/abJVNjg
You can add max-width: 100%; instead of width: 100%;
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Take a look at that example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #000;
text-align: center;
}
<div class="mini_video">Hello World</div>
I want to display an expandable div (width: 100%) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
You can use calc() css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Sometimes it's better to do the opposite and give the parent div padding instead:
LIVE DEMO
What I did was change the CSS of #page to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation.
One solution is to escape LESS so that it doesn't execute the operation.
Disable LESS-CSS Overwriting calc()
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
width: -o-calc(~"100% - "#someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(#marginSize,#paddingSize) {
#minusValue: (#marginSize+#paddingSize)*2;
padding: #paddingSize;
margin: #marginSize;
width: calc(~"100% - "#minusValue);
width: -moz-calc(~"100% - "#minusValue);
width: -webkit-calc(~"100% - "#minusValue);
width: -o-calc(~"100% - "#minusValue);
}
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
So I have a site with a simple two DIV panes: a content area left and a fixed 300px menu right, both of them going to a max of 1200px. I want users to be able to resize the window and have the LEFT pane shrink with the right menu staying fixed. But right now I can't find any way to do this, everything looks good at max size, but the left pane doesn't shrink if I resize the window, instead the right menu just wraps to the bottom of the screen. This would be easy with a left menu but the menu is on the right. Here is what I have so far:
#main
{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 0;
display: block;
padding: 0;
}
#left
{
max-width: 890px;
float: left;
padding-right: 10px;
}
#right
{
width: 290px;
top: 0;
float: right;
padding-right: 10px;
padding-left: 10px;
}
you can use CSS calc() to adjust the width of the left container.
OPTION 1 FIDDLE
HTML
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
CSS
#main{
width: 100%; //set to 100% since you're capping it at 1200 anyways
max-width: 1200px;
/* margin-right: auto;
margin-left: auto;
margin-top: 0; */ condense these to the following:
margin: 0 auto;
/*display: block;*/ already a block element so not necessary
padding: 0;
overflow: hidden; //add to correct floating elements
}
#left{
background: red; //just for my test
height: 100px; //just for my test
width: calc(100% - 300px); //readjusts based on screen size
float: left;
padding-right: 10px;
-moz-box-sizing: border-box; //if you use padding add these lines to fix issue of padding adding to width
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
background: black; //just for my test
height: 100px; //just for my test
width: 300px;
/*top: 0;*/ //dont need, not doing anything
float: right;
/*padding-right: 10px;
padding-left: 10px;*/ //can condense to following:
padding: 0 10px;
-moz-box-sizing: border-box; //see padding explanation above
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
OR
If you are worried about older browsers you can do this with display: table and display: table-cell like so:
OPTION 2 FIDDLE
CSS
#main{
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
padding: 0;
display: table; //add
table-layout: fixed; //add
}
#left{
display: table-cell; //use instead of float
background: red;
height: 100px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
display: table-cell; //use instead of float
background: black;
height: 100px;
width: 300px;
padding: 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Instead of floating the divs, try display: inline-block on the left and right panes, or CSS3 flexbox (depends on how far back you support legacy browsers).
Flexbox example: http://jsfiddle.net/571k3gx2/
I want to display an expandable div (width: 100%) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
You can use calc() css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Sometimes it's better to do the opposite and give the parent div padding instead:
LIVE DEMO
What I did was change the CSS of #page to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation.
One solution is to escape LESS so that it doesn't execute the operation.
Disable LESS-CSS Overwriting calc()
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
width: -o-calc(~"100% - "#someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(#marginSize,#paddingSize) {
#minusValue: (#marginSize+#paddingSize)*2;
padding: #paddingSize;
margin: #marginSize;
width: calc(~"100% - "#minusValue);
width: -moz-calc(~"100% - "#minusValue);
width: -webkit-calc(~"100% - "#minusValue);
width: -o-calc(~"100% - "#minusValue);
}
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}