I have a layout defined through CSS that has three columns. It displays correctly through Chrome, but in Firefox, the third (right) column wraps around to the bottom. Am I defining the layout incorrectly?
<style type="text/css">
.content {
position: relative;
border-top-width: 1px;
width: 100%;
min-width: 960px;
margin-top: -1px;
}
.content-container {
border: 0;
position: relative;
width: 960px;
border-radius: 0 0 0 0;
margin: auto;
}
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
.center-content-container {
vertical-align: top;
display: inline-block;
min-height: 900px;
width: 500px;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
height: 100%;
position: relative;
padding: 15px 0 0 0;
}
.center-content-subcontainer {
padding: 0 0 0 5px;
}
.right-menu-container {
vertical-align: top;
display: inline-block;
width: 260px;
border: solid;
position: relative;
}
.right-menu-subcontainer {
margin: 16px 0 0 0;
}
#slideshow {
position:relative;
height:250px;
width: 250px;
overflow: hidden;
background-color: #ffffff;
}
</style>
How can I get this to display correctly across browsers?
<body>
<div class="content">
<div class="content-container">
<div class="left-menu-container"></div>
<div class="center-content-container">
<div class="center-content-subcontainer"></div>
</div>
<div class="right-menu-container">
<div class="right-menu-subcontainer">
<div id="slideshow" align="center">
<img src="" alt="Slideshow" title="Slideshow" width="250" height="100">
</div>
</div>
</div>
</div>
</div>
</body>
In FF 5.x the box widths are this:
Left: 188 + 20 (width+ padding)
Center: 500 + 1 + 1 (width + L & R borders)
Right: 260 + 3 + 3 (width + L & R borders)
Total: 976
Firebug's Layout Inspector is your friend here.
I think the problem is with this line of CSS:
box-sizing: border-box;
What version of Firefox are you using? Because even as late as version 4 (possibly later, I'm not sure), Firefox only supports -moz-box-sizing. And if Firefox isn't changing its box-sizing, then that means it thinks you're trying to stick 968px worth of content into 960px worth of space.
Try this on your left-container:
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
Probably worth a read:
https://developer.mozilla.org/en/CSS/box-sizing
Related
I am trying to create a CSS Table based layout which has an even spacing/border around each table cell and making sure that the table-cells are always the same height. Here is an example of what I am trying to achieve:
My HTML currently looks like this:
.two-col.body-width {
max-width: 1138px;
}
.two-col {
display: table;
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
border-spacing: 25px 0px;
}
.two-col > .col_container.align-top {
vertical-align: top;
}
.layout .section-tout {
position: relative;
padding: 20px 40px 48px;
background: #f4f4f3;
border-left: 5px solid #da202a;
}
.two-col > .col_container {
width: 50%;
display: table-cell;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<!-- content goes here -->
</div>
<div class="col_container align-top section-tout">
<!-- content goes here -->
</div>
</section>
Here is a working example: https://jsfiddle.net/grzkgdp3/1/
What I have here is almost perfect, but as you can see from the image I updated I need the spacing / border to be doubled in the middle and I cannot see an intelligent way of doing this.
I can see a solution where I used border: 25px solid white; on the tabel-cell. This solves my spacing issue but because I need the red border on the left, I then have to apply this using the :after pseudo element which makes things a bit messy.
If anyone has a solid solution that can help it would be great to hear it.
Cheers!
Update
Unfortunately I cannot use a flexbox solution as I need to support all modern browser and IE9 and above.
Sometimes we must bend to support compatibility. I used linear-gradients to achieve the result.
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
}
.two-col {
display: table;
clear: both;
margin: 0 auto;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
}
.two-col > .col_container.align-top {
vertical-align: top;
}
.layout .section-tout p {
position: relative;
padding: 20px 40px 48px;
margin: 0;
}
.two-col > .col_container {
width: 50%;
display: table-cell;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
padding: 0px 25px;
background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>
Working Fiddle
Working fiddle (without calc)
Have you considered Flexbox
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: white;
}
.two-col.body-width {
max-width: 1138px;
padding: 25px;
}
.two-col {
display: flex;
margin: 0 auto;
box-sizing: border-box;
}
.layout .section-tout {
position: relative;
background: pink;
padding: 20px;
border-left: 5px solid #da202a;
flex: 0 1 50%;
display: flex;
}
.two-col > div:first-child {
margin-right: 50px;
}
<section class="layout two-col body-width">
<div class="col_container align-top section-tout">
<p>
See how there is different amounts of content, but the cells are always the same height, this is very important!
</p>
</div>
<div class="col_container align-top section-tout">
<p>
Hi!
</p>
</div>
</section>
On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.
try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}
Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.
You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/
I am making a simple slideshow and I have got the javascript working very easily. However the layout is not going as well. The current image is display in big with a fixed width of 80% and the height can change to keep its aspect ratio.
The problem with this is that I want the the current image to be displayed in its correct aspect ratio (which it is) and I want the thumbnail bar on the right to have a scrollbar if it overflows this height.
Here is a demo on jsfiddle: http://jsfiddle.net/ZTBNR/1/
Here is the code:
CSS
div.slideshow{
width: 100%;
background: #B8B8B8;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #000;
overflow: hidden;
}
div.slideshow > div.current-slide_wrapper{
padding: 10px;
float: left;
width: 80%;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
border-right: 1px solid #000;
}
div.slideshow > div.current-slide_wrapper img{
width: 100%;
vertical-align: bottom;
cursor: pointer;
}
div.slideshow > div.other-slides_wrapper{
padding: 10px 15px;
float: right;
width: 20%;
height: 100%;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
div.slideshow > div.other-slides_wrapper img{
border: 5px solid #FFF;
width: 100%;
cursor: pointer;
margin-left: -5px;
}
div.slideshow > div.other-slides_wrapper img:hover{
border: 5px solid #EAEAEA;
}
div.slideshow > div.other-slides_wrapper img.current{
border: 5px solid #000;
}
HTML
<h3>Screenshots</h3>
<div id="slideshow-1" class="slideshow_wrapper">
<div class="slideshow">
<div class="current-slide_wrapper">
<img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
</div>
<div class="other-slides_wrapper">
<img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
<img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/>
<img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/>
<img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/>
<img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/>
</div>
</div>
</div>
I solved it! I set div.slideshow to display: block; position: relative; and div.current-slide_wrapper is no longer floated.
I then set div.other-slides_wrapper to position: absolute; top: 0; right: 0; height: 100%;. This worked perfectly!
I've just been introduced to the Zurb Foundation 4 framework via a friend of mine. Interesting stuff. But i'm having a problem I can't seem to understand. I have a site based on 4 rows (header, navbar, content, footer);
<div class="row siteBase">
<div class="row siteHeader" id="siteHeader">
<div class="large-12 c7olumns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.1.2.</p>
</div>
</div>
<div class="row siteNavbar" id="siteNavbar">
navbar
</div>
<div class="row siteBody" id="siteBody">
base
</div>
<div class="row siteFooter" id="siteFooter">
footer
</div>
</div>
here's my CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.siteBack {
background-color: #545454;
}
.siteBase {
/*base size and color*/
width: 1280px;
min-height: 100%;
margin: 0 auto;
background-color: #f2f2f2;
/* exact fit the contents to the border */
padding-left:15px;
padding-right:15px;
/* border size and color */
border-style: solid;
border-left-width: 4px;
border-top-width: 0px;
border-right-width: 4px;
border-bottom-width: 0px;
border-color: #7da500;
/* add some shadows to the borders */
-moz-box-shadow: 0 0 10px 5px #272727;
-webkit-box-shadow: 0 0 10px 5px #272727;
box-shadow: 0 0 10px 5px #272727;
}
.siteHeader
{
width: 100%;
height: 250px;
background-color: #7da500;
}
.siteNavbar
{
height: 50px;
background-color: #1d1d1d;
}
.siteBody
{
min-height: 100% auto;
margin: 0 auto;
background-color: #f2f2f2;
}
.siteFooter
{
height: 50px;
background-color: #7da500;
}
The problem I have is that the sitebody div isn't stretched to to full 100%. The header and navbar is fixed size, as is the footer. But I wan't the sitebody div to take the remaining space so that the footer is always placed in the lower bottom of the screen (at minimum).
What am I missing here? Thanks a lot for your help.
Basically what you need is to stick your footer to the bottom of the page. In that manner you will have a full body even if your main content is small. You can take a look at this SO question to see how it is implemented. There could be a lot going on in there as that layout is a bit complex. So I did a sample for you that you can use for a more simple layout. Here is the modified css from the other SO question.
html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /* same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
background-color:yellow;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.