I'm attempting to use Semantic UI to create a row of equal height columns separated by a gutter. My solution works in Chrome and Firefox but not Safari (I haven't tested IE yet). Safari dev tools show that each column has an equal height as expected however creating an .inner div and setting the height to 100% has no effect on the height of .inner.
I believe I need the .inner div in order for each block to have a background colour separated by a gutter.
Here's a JSFiddle to illustrate the problem. For me it renders like this in Chrome:
and like this in Safari:
I'm not sure if this is a bug in WebKit (or even blink/gecko!), I found a similar bug in webkit but it's marked as fixed/resolved.
If there's nothing wrong with my approach to this can someone suggest a workaround? Preferably without patching with JavaScript.
Could you please use display:table; it will work.
.inner {
height: 100%
}
body {
font-family: "helvetica";
background: white;
}
#column-1 {
background: #e3e0cf;
}
#column-2 {
background: #9fa8a3;
}
.equal { display:table; }
.column { display:table-cell; }
<div class="ui stackable equal height grid">
<div class="six wide column" id="column-1">
<h1>Column 1</h1>
</div>
<div class="six wide column" id="column-2">
<h1>Column 2</h1>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
</div>
This is a known issue in Safari indeed. A workaround for this is to define a height property on .ui.grid .column and set your div.inner height to 'inherit'. Below is a css code that works in Safari browser:
div.inner{
height:inherit;
background-color:gold;
}
.ui.grid .column{
height:25vh;
}
Screenshot:
Related
kinda a noob question on css
I have a couple of divs
in a page. Now when I zoom in that page Div 3 (that is currently floating left)
doesn't fit any more so it falls right under Div 2. How can I change this behaviour for the whole page so that a scrollbar appears when I zoom in? I tried setting the overflow-x : scroll for the whole body in a css but it didn't seem to have any effect.
I made a JSFiddle for this: http://jsfiddle.net/Lq3Hv/
html
<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>
css
.first {
background-color:red;
width: 400px;
}
.second {
background-color:blue;
width: 200px;
float:left;
}
.third {
background-color:green;
width: 200px;
float:left;
}
.fourth {
clear:both;
background-color:yellow;
width: 400px;
}
Try to zoom in the browser and you'll see that div3 falls under div2. (In chrome anyway).
I generally want to use a solution that works both in IE8 + and chrome.
thanks.
All you need to do is Add a wrapper div and give total width to it.
Working Fiddle
HTML
<div class="wrap">
<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>
</div>
CSS
.wrap {
width:400px;
}
Thank you all for your help so far. I updated the description, concept image, and JSFiddle link to make things a little clearer.
I have been wracking my brains on this seemingly small issue the whole day. My web dev friends are baffled and I could not find a suitable answer in my search of this site and others (though, I could have missed it somewhere along the way).
Here's what I am trying to achieve:
3 non-fixed-width DIVs within one fixed-width container DIV
The center DIV needs to be centered, and no larger than the text it contains.
The left and right DIVs need to fill the remaining space in the container DIV.
Here are some links to help communicate this concept:
This is what I'd like to end up with
Check out this JSFiddle Link
The basic HTML:
<div id="container" >
<div id="left" ></div>
<div id="center" >Text inside center should resize this block</div>
<div id="right" ></div>
</div>
Below, I removed most of the styles I have tried. This CSS currently centers the DIV (if I set it as an inline block), but I need the other divs to fill the left and right space remaining:
#container {
width:750px;
text-align:center;
border:3px solid #E85355;
}
#left {
background-color:#A3CB46;
}
#center {
background-color:#6D6E71;
display:inline-block;
color:#FFFFFF;
}
#right {
background-color:#1DB0CE;
}
I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!
Try the following CSS. It fills the width of the container...
#container {
width:764px;
text-align:center;
}
#container > div {
display: table-cell;
}
#center {
background-color:#CDD7D7;
}
#right, #left {
background-color:#E85355;
width:200px;
}
EDIT: display:table on container, not needed...
Do you need this ?
CSS
#container {
width:764px;
text-align:center;}
#left {
background-color:#E85355;
width:20px;
height:20px;
float:left;
}
#center {
background-color:#CDD7D7;
display:inline-block;}
#right {
background-color:#65A8A6;
width:20px;
height:20px;
float:right;
}
DEMO
Try this:
jsfiddle.net/SHnc9/36/
You can do it with flexbox! Demo: http://dabblet.com/gist/7187048
Markup
<div class='container'>
<div class='box left'></div>
<div class='box center'>enter text here to see this box grow!</div>
<div class='box right'></div>
</div>
CSS
.container {
display: flex;
}
.box {
flex-grow: 1;
}
.center {
flex-grow: 0; /* to get the box to wrap closely around the text */
}
According to caniuse.com http://caniuse.com/#search=flexbox, it's supported in all the major desktop browsers with firefox having partial support which probably means it uses the old syntax / doesn't support some new properties but the demo worked fine when I checked.
Just be sure to use prefixes(or use a prefixfree / unprefix plugin), add the old syntax for old browser versions (add old syntax below the new ones).
Also, use display: inline-block as a fallback.
You may also want to check out flexie.js http://flexiejs.com/.
Essential reading:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
It works on Firefox. How come it doesn't work on Google Chrome?
So, after some frustration, I found a solution. It's a hack, but Chrome doesn't support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I'm printing tabbed content.
<body>
<main role="main">
<section class="tabs">
<div class="tabbed-content">
<div class="tab">print page 1</div>
<div class="tab">print page 2</div>
<div class="tab">print page 3</div>
</div>
</section>
</main>
</body>
Then your CSS looks similar to this.
html, body, .main-content, .tabs, .tabbed-content { float: none; }
.tab {
display: block; /* unhide all tabs */
break-before: always;
page-break-before: always;
}
It's July 2014, and as of today doing float: none; for all parent elements is what worked for me:
#media print {
table {float: none !important; }
div { float: none !important; }
.page-break { page-break-inside: avoid; page-break-before: always; }
.dont-print { display: none; }
}
This solution works on Firefox, Chrome and Safari. I have the !important in there because I'm using Bootstrap, and bootstrap does a float: left by default on divs.
3 years later float:none !important for div was the solution for getting the break working in chrome. Not necessary to float:none all parents (body or html)
#media print {
div {
float: none !important;
}
}
<div style="display: inline-block; "> has been reported as a way to avoid page-breaking in the middle of something, YMMV. Also, try removing borders, and ensure there are no floats. See also CSS Page-Break Not Working in all Browsers.
here's an easier solution for setting all parent elements to not float on print:
#media print {
* {
float: none !important;
}
.tab {
display: block;
break-before: always;
page-break-before: always;
}
}
Chrome has problems processing page-break-after, and page-break-inside this is a known bug and Google has said a few times to avoid using this type of styling since not only Chrome but many more browsers run into problems using it.
You should consider styling the tables thought DIV's rather than the tables themselves. Personally in this day and age its normally best to avoid using tables as they are not as flexible as DIV styling.
DIV styling as mentioned is more flexible and easy to work with and looks almost the same on all browsers since browsers tend to render tables differently across browers.
Here is a simple example of how to style the first table you have in DIV and is by far pixel perfect but should give you an idea. Almost the same with some improvement but without the font you use doesn't look as good, doesnt use image as the background which is ++ :P
CSS
#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}
HTML
<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
I've saved this code online for you to see and test, take a look at http://jsfiddle.net/tsd4V/
Again this is just a better method you can use table styling but don't use page-break if you want good cross browser compatibility.
I have an empty div which contain a background image that is bigger than the size of the container. I fix this one by background-image property with the value (100% 100%). That's fine until you open the example in IE8 and IE7. Any solutions for that, even a javascript script or jquery plugin?
i.e: http://jsbin.com/imirer/1/edit
i.e: http://jsfiddle.net/bPTzE/
HTML:
<div class="container">
<div class="background"></div>
</div>
CSS:
.container {
/* an example width for responsive perpose */
width: 500px;
}
.background {
height: 27px;
background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;
/* not working in IE8 and IE7 */
background-size: 100% 100%;
}
since background-size is CSS3 specific which is not supported to IE you have to do something like this for it to work in IE
set your html and body to
html {overflow-y:hidden}
body {overflow-y:auto}
wrap the image you want fullscreened with a div #page-background
#page-background {position:absolute; z-index:-1}
then put this in your html file
<div id="page-background">
<img src="/path/to/your/image" width="100%" height="100%">
</div>
** you will have to use some sort of reset to remove the margins and paddings, something like this
html, body {height:100%; margin:0; padding:0;}
background-size not supported by ie7 and ie8.
the alternative way you can use put 'tag' in div tag and add width 100% to it. It is full scalable.
try this code:
<div class="container">
<img src="http://s18.postimage.org/jhbol7zu1/image.png" width="100%" />
</div>
or
html:
<div class="container">
<img src="http://s18.postimage.org/jhbol7zu1/image.png" />
</div>
css:
.container img {
width:100%
}
What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?
<div id="wrapper">
<div id="header">
This is the Header
</div>
<div id="top-nav">
Top Navigation
</div>
<div id="leftcolumn">
Left Column
</div>
<div id="content">
content column
</div>
<div id="rightcolumn">
Right Column
</div>
<div id="footer">
This is the Footer
</div>
</div>
#wrapper {width:970px;margin:0 auto }
#header {height:100px }
#top-nav {height:30px}
#leftcolumn { }
#content { }
#rightcolumn { }
#footer {height:100px}
With this XHTML code what css should be written to make this 3 col layout.
cross browser compatible including
IE6 (without CSS hack or extra
conditional css for IE)
Width in Px
Centered
Font-sizing in em
Number of column can be extended or
removed 1-4,5 etc
SEO Enabled
Um, this is pretty darn easy with floats and faux columns.
Why do you have so many containers around the columns? You only need one. To clear the floats, do
#container {
width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
overflow:auto; /* hidden works too */
background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}
and for the columns themselves
#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }
Use jQuery + its layout plug-in. Keep your full head of hair.