I am trying to get two columns of content the same height using the CSS tables method. However, for some reason, the first column has extra padding at the bottom, the second column has extra padding at the top.
I am using the same code I usually do and cannot find the source of the problem when inspecting the code. I have double checked my code and look at other examples but cannot find the cause of this problem.
The code I am using is:
.archive-post{
display:table;
vertical-align: top;
padding:20px 0px;}
.archive-post .left-column{
display:table-cell;
width:60%;}
.archive-post .right-column{
display:table-cell;
width:40%;
padding-left:20px;}
Or you can see a live link here.
Use vertical align
.archive-post .left-column,
.archive-post .right-column {
vertical-align: top;
}
This should to the trick.
Just a small idea.. have you tried flexbox, for that? It's really a simple and easiest way to do that. Plus you can use position:absolute; inside the columns (display:table and display:table-cell do not allow that).
* {
box-sizing: border-box;
line-height: 2;
}
main {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1.25em 0em;
}
section {
background-color: #ccc;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
aside {
background-color: #ccc;
margin-left: 20px;
width: 40%;
}
<main>
<section>
left column.<br>higher then the other
</section>
<aside>
right column
</aside>
</main>
Related
I want to make some kind of image viewer with some descriptive text below. Problem is, that the lower box with the description has a fixed height and the image should fill the remaining height of whatever container it is in.
I wanted to use flexbox for that, as I think it seems to be the most elegant and simple solution (without using JS).
This this code and codepen for my current work, which seems to work mostly:
html, body, #container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
max-width: 75%;
background-color: #fcc;
margin: 0 auto;
}
img {
max-height: 100%;
/* HERE IS WHERE MY PROBLEM STARTS!; */
max-width: 100%;
}
#container > #text {
flex-grow: 0;
flex-shrink: 0;
background-color: rgba(128, 128, 128, 0.7);
padding: 5px;
max-width: 75%;
margin: 15px auto 0;
/* TOP MARGIN DOESN'T WORK */
}
http://codepen.io/Kageetai/pen/AaCJy
I got most of it to work but the image is not resizing itself correclty. As you can see through the transparent background of the text box, it stretches itself over the border of the containing div and even behind the text box.
So how can I retain the image with the correct aspect ratio inside its container?
And furthermore the centering with margin: 0 auto; seems to make problems when resizing the window. The image is not centered anymore and the page needs a refresh to make it work again.
So does anyone know how to make the image behave correctly? :)
For image , you can set an height, margin and display.
For image container, give a 2 or 3 value to flex and none to other, so it fills as much space as avalaible.
DEMO
CSS used :
html,
body,
#container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #text {
background-color: #ccf;
padding: 5px;
}
#container>#image {
flex:3;
display:flex;
}
img {
width:auto;
display:block;
margin:auto;
height:100%;
}
Here's a more basic demo of how to achieve this.
<html style="height: 100%">
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
<p>Toolbar</p>
<div style="background: #bbb; flex: 1">Image</div>
</body>
</html>
A demo can be seen over at Codepen.
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
I am trying to get css3 flexbox working (for the first time) to make equal height columns (for those browsers that support it).
I have seen various examples across the web but I cant get any to work.
Here is my code (followed by a jsfiddle link)
<div>
<span><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></span>
<span>col2</span>
<span>col3</span>
</div>
div { background:red; float:left;
-webkit-display:flex;
-moz-display:flex;
display:flex;
}
span { display:block; background:yellow; float:left; width:100px; margin:0 10px;
-webkit-flex:1;
-moz-flex:1;
flex:1;
}
http://jsfiddle.net/38kbV/
Any pointers would be greatly appreciated.
The float is causing the entire thing to fall apart in Firefox. If you need it to appear inline with other content, you'll need to use the inline display property instead (inline-flex, inline-flexbox, inline-box).
When you're following the modern Flexbox draft, you need to stick with all of the properties that belong to that draft. If you try to mix and match, they won't work as expected. There are 3 different drafts that have been implemented in various browsers, each with different property names and values (see: https://gist.github.com/cimmanon/727c9d558b374d27c5b6)
http://tinker.io/11122/2
div {
background: red;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
span {
display: block;
background: yellow;
float: left;
width: 100px;
margin: 0 10px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
This is my CSS code;
#wrap {
width:50em;
max-width: 94%;
margin: 0 auto;
background-color:#fff;
}
#head {
width:50em;
height:10em;
max-width: 100%;
margin: 0 auto;
text-align:center;
position: relative;
}
#css-table {
display: table;
margin: 1em auto;
position: relative;
width:50em;
max-width: 100%;
}
#css-table .col {
display: table-cell;
width: 20em;
padding: 0px;
margin: 0 auto;
}
#css-table .col:nth-child(even) {
background: #fff;
}
#css-table .col:nth-child(odd) {
background: #fff;
border-right: 4px double #b5b5b5;
}
And my HTML code;
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
Is there a reason why is Chrome doing this?
Technically Chrome is following the rules because max-width should only apply to block elements.
From MSDN docs:
The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.
max-width property
MSDN Doc
The solution I found was using table-layout: fixed and width: 100%
Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.
I was able to use a mixin(SASS) to fix the issue.
#mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}
I'm looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.
They should not break in two lines but hide if not enough place. I'm trying with this example, but it doesn't work.
There is a similar question, but's it's not the same scenario as size is unknown.
Help is appreciated
Write like this:
.container {
white-space: nowrap;
}
.d1,
.d2{
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.d1 {
background-color:#ff0;
}
.d2 {
background-color:red;
}
Check this http://jsfiddle.net/xcSXA/5/
float: left does not give you, what you need.
Try display: inline
http://jsfiddle.net/xcSXA/3/
Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.
HTML
<div class="container">
<div class="d1">icon</div>
<div class="d2">This can be very very very very large.</div>
</div>
CSS
.container {
white-space:nowrap;
overflow:hidden;
width: 100px;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
display: inline-block;
background-color:red;
}
Working Example: http://jsfiddle.net/C4Wfa/
.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.
I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}
You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50