I'm trying to make my own responsive layout using percentages. I managed to calculate the columns that I wanted to use but I can't work out how to put like a margin (gutter) in between columns. If you check the codepen code there is no spacing in between the contents.
Codepen
.container{
width: 90%;
max-width: 1140px;
margin: 0 auto;
/*background: #333;*/
}
.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
padding-right: 1em;
padding-left: 1em;
border-left-width:12px;
}
.row{
float: left;
clear: both;
width: 100%;
}
.container .columns.col-1 { width: 8.33333333333%; }
.container .columns.col-2 { width: 16.6666666667%; }
.container .columns.col-3 { width: 25%; }
.container .columns.col-4 { width: 33.3333333333%; }
.container .columns.col-5 { width: 41.6666666667%; }
.container .columns.col-6 { width: 50%; }
.container .columns.col-7 { width: 58.3333333333%; }
.container .columns.col-8 { width: 66.6666666667%; }
.container .columns.col-9 { width: 75%; }
.container .columns.col-10{ width: 83.3333333333%; }
.container .columns.col-11{ width: 91.6666666667%; }
.container .columns.col-12{ width: 100%; }
I would personally shy away from Calc as it's still not fully supported but up to you — http://caniuse.com/#feat=calc
I would recommend wrapping all of your content in another set of elements that way you can use padding for spacing and margin for alignment. Check out the demo.
<div class="columns col-6"><div>6</div></div>
DEMO
Instead of giving padding give margin
.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}
Use calc() method to calculate margin from width.For example for .col-3 the CSS would be
.container .columns.col-3 {
width: calc(25% - 5px);
margin-right:5px;
}
make sure you use calc() in right way like this
calc([first value][space][operator][space][second value])
If you see your columns width, You have divided 100% of the viewport width equally.
For example:
.container .columns.col-6 {
width: 50%;
}
So in that case, you won't have any space between two blocks.
So while mentioning the width for the columns, you need to consider margin as well.
so you can use either of the following two approaches:
.container .columns.col-6 {
width: calc(50% - 10px); // 10px represents the margin / space
margin-right:10px;
}
or
.container .columns.col-6 {
width: 46%;
margin-right: 1%;
}
The first approach is better.
Related
I have a 3 column element on a page
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
And have the following css rules:
main {
display:flex;
flex-wrap:wrap;
margin-left: -20px;
}
main > * {
margin-left: 20px;
}
aside.left-sidebar {
max-width: 320px;
width: calc(25% - 20px);
}
.main-content {
width: calc(100% - 800px);
margin: 0 auto;
padding-top: 65px;
max-width: 1200px;
}
aside.right-sidebar {
max-width: 400px;
width: calc(25% - 20px);
}
This works fine on Chrome and Firefox but not on Microsoft Edge, anything am missing?
One thing I noticed on Edge upon checking its DevTools is that it will reverse the operation on the calc() function so instead of width: calc(25% - 20px); it'll convert it to calc(-20px + 50%)
unsure if that's the culprit tho the result is the same I think.
UPDATE: Forgot to include that there's a max-width set on columns and max-width:100% is called when screen size is #media screen and (max-width: 1440px).
Possible workaround that shouldn't be used
This only appears to be a problem with percentage widths, not viewport width units (vw). Here is a workaround that shouldn't be used:
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
max-width: 100%;
width: calc(25vw - 20px);
}
.main-content {
background: green;
max-width: 100%;
width: calc(50vw - 20px);
margin: 0 20px;
}
aside.right-sidebar {
background: blue;
max-width: 100%;
width: 25vw;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
What you should use
Since you're using flex, use flex:
First and third column are given flex: 1
Center column is given flex: 2
Place the left and right margin on the center column
The columns can be given individual max-widths
No widths are given
This gives you the same ratio, no need for calc.
Example
Note: I have removed the default margin on the body and given main 100vh so it has a height for this example.
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
flex: 1;
max-width: 320px;
}
.main-content {
background: green;
flex: 2;
max-width: 1200px;
margin: 0 40px;
}
aside.right-sidebar {
background: blue;
flex: 1;
max-width: 400px;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
I have two elements that i always want to show in a single line. First element has 100% available width up to maximum of 350px and second has fixed with of 150px.
When width of parent (or browser) is reduced I want first element's width to get reduced to adjust both elements in same line, but second element moves to next line
Here is a sample code:
span {
height: 30px;
display: inline-block;
}
.span1 {
background: red;
max-width: 350px;
width: 100%;
}
.span2 {
background: blue;
width: 150px;
}
<span class="span1"></span>
<span class="span2"></span>
Hm ok, here is an example:
span {
height: 30px;
display: inline-block;
margin-right: -.25em;
}
.span1 {
background: red;
width: 350px;
max-width: calc(100% - 150px);
}
.span2 {
background: blue;
width: 150px;
}
I'm not sure if I understand you right. Here is a fiddle: http://jsfiddle.net/cmy45soz/
Ciao
Ralf
fiddle
I've the following markup:
<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>
and the following css:
#all{
height: 300px;
background: red;
}
#one{
float: left;
}
#two{
float: right;
}
#main{
margin: 0 auto;
width: 250px;
}
I wanted to align vertically but no success even after using pseudo technique. Vertical alignment should work at least ie8.
Please note: I can't change the markup. It means I can't avoid using float.
So, is there any way to make it success?
Well, using CSS floats gives no chance to align the floated element vertically in their container (regardless of using CSS flexible box method).
Hence I'd go with inline-blocks so that I can align them by vertical-align: middle declaration.
So far so good, but the #two element must be positioned at the right side of the container without using CSS floats. Hence we have to specify width of the columns to reorder the columns via relative positioning:
To get this approach to work on IE8, we have to use percentage units for the width columns. Saying that we'll end up with:
EXAMPLE HERE
#all {
height: 300px;
width: 100%;
font-size: 0; /* To remove the white-space between inline-block columns */
}
#all:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#one, #two, #main {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 16px; /* Reset the font-size to the default value */
}
#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; } /* Pull the column to the left by 30% */
This will work on IE8+ (not remember the requirements of IE6/7). However for IE9+ we can use calc() expression to specify the width of columns like so:
Example Here
#one, #two {
width: calc((100% - 250px) / 2);
}
#two{
left: 250px;
text-align: right;
}
#main{
right: calc((100% - 250px) / 2);
width: 250px;
background-color: orange;
}
Demo
Using flex-box
css
#all{
height: 300px;
background: red;
display: flex;
align-items:center
}
#one{
float: left;
order: 1;
}
#two{
float: right;
order: 3;
}
#main{
margin: 0 auto;
width: 250px;
order: 2;
}
Using a bit of jquery and css you can easily center the elements that you want:
CSS
div{
outline:solid gray 1px;
}
#all{
height: 300px;
}
#one{
float: left;
position:relative;
}
#two{
float: right;
position:relative;
}
#main{
margin: 0 auto;
width: 250px;
position:relative;
}
JS
function center(element){
var all = $("#all");
if(element.height()<all.height()){
element.css(
"top",
((all.height()/2)-(element.height()/2))+"px"
);
}
}
center($("#one"));
center($("#two"));
center($("#main"));
FIDDLE
http://jsfiddle.net/ovkgzmdv/5/
I'm seasoned webdesigner, so I don't know much about this art.
I got three elements placed horizontally (left/center/right) which have fixed size:
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
and inside every div there are few images, that are centered horizontally and general style for img is:
img {
max-width: 100%;
}
to make them fluid.
But since divs are not flexible, images inside them also won't change their size when resizing browser window.
Is it possible to set fixed size on any html element and still somehow make it fluid?
I know I could use percentages instead pixels, but I've got also problems with setting proper height for .banner-box using percents - box doesn't stretches to desired 400px, only to 281px.
Here's html:
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<p><span>some span</span> blah</p>
<p>mail: <span>mail#domain.com</span></p>
</div>
And whole css for my simple webpage:
html {
background: url('mu-media-background-1920.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
img {
max-width: 100%;
}
#container {
width: 1200px;
margin: 5% auto;
text-align: center;
}
#header {
display: block;
clear: both;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
display: block;
width: 95%;
height: auto;
margin: 10% auto 5% auto;
}
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
.banner-text {
position: relative;
display: block;
top: 7%;
margin: 0 auto;
}
.see-more-button {
position: absolute;
display: block;
margin: 0 auto;
left: 0; right: 0; bottom: 0;
}
#virtual-studio {
float: left;
}
#mu-animation {
float: right;
}
#shadows {
display: block;
clear: both;
position: relative;
width: 100%;
}
#shadows img {
display: block;
clear: both;
position: relative;
margin: 0 auto;
}
#footer {
display: block;
clear: both;
width: 95%;
margin: 0 auto;
font: 15px Arial, Helvetica, sans-serif;
}
#footer p {
display: table;
clear: both;
position: relative;
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
I'm preparing responsive layout, so it would be best (afaik) to use only percentages.
Here is a good hybrid approach that has worked well for me in the past.
As you've already mentioned you could use percentage widths to build a fluid layout, and then restrict/fix specific div sizes with max and min values. So for example:
#container {
width: 100%;
max-width: 1200px;
}
Here is a working example with the banner boxes restricted to max 300px width and min 400px height (I added some padding and borders so you can see what is going on): jsfiddle
In the end you'd still have to adjust your responsive media queries to deal with your fixed elements, but this way you'd only have to change a few min and max values.
You will need to use media queries and define fixed widths/heights for .banner-box for each screen break point that you choose.
You'll have to play with the sizing and see which sizes fit best for which break points.