I was wondering if there is an alternative to writing css rather than with css tables to make liquid / dynamic layouts. vinyll really helped me here... simple 3 Column responsive layout
and that is exactly how I need the columns to work, but when I use css tables, it seems I cannot position things inside with margin and padding (I probably could with left and right but relative positing breaks the document flow so I don't want to do that)...heres and example
http://jsfiddle.net/u5nR2/4/
.container{
width:100%;
height:100%;
display: table;
}
div > div {
display: table-cell;
}
.three div{margin-top:100px}/*why doesnt this move?*/
Use padding on the parent element. Margin needs an other element to bounce.
Change
.three div{margin-top:100px}
To
.three { padding-top: 100px; }
Also, change: div > div to .container > div. I assume you only want to select the direct child divs of .container. When you use div > div, the divs inside .one, .two and .three will also be selected. (also mind the vertical-align: top to position the text in the table-cells at the top)
Check your updated Fiddle
Related
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
Imagine h1 is inside a div:
Compare two styles: What is the problem with inline-block?
h1 {
display: block;
Width: 150px;
margin: 0 auto
}
h1 {
display: inline-block;
Width: 150px;
margin: 0 auto
}
As their name implies, inline-blocks are laid inline. Auto margins have no effect on inline and inline-block boxes.
This isn't a "downside" or a "problem" with inline-blocks per se; it's just how inline formatting works. There is little reason to use an inline-block for anything other than putting a block container on a line box.
You could wrap inline-block styles around a block. That way you still get to control margins.
.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>
You may add as many inline blocks and will just work.
Well...a bit late, but still useful, I hope.
First of all: a visual example is here on the Jsfiddle.
Remember that "headings" are block-level elements (see MDN), so the display:block; is somewhat "implicit".
When you add the display:inline-block;, you are in fact removing the "block-level" element status thus making it behave differently: in your specific case, margin: 0 auto means 0-pixels margins on top and bottom, while 0-pixels margin on the left and "whatever it is" on the right. Just like any text on your page. So, you could add something after the <h1> tag, to have it show up inline (of course) with the heading (see JSFiddle example).
On a display:block; element, on the contrary, the left and right margins would be calculated so that the element remains on the center of the parent.
As an example I'm trying to create a thumbnail, but my automatic img css as listed below is applied
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
I can't make sense of it in my mind for some reason. I know the syntax is probably simple, but I can't seem to remember it.
Thanks
Chris
The reason you can not add margin to your images is because img elements are, by default, inline. It means you can not give them dimensions, or add margin from the bottom or top (and some other stuff you should probably read about).
This means that in order to give img element margin from top or bottom, you need to declare it as a block, or rather inline-block. This is achieved using
img { display: inline-block; }
Then you can add away your margins, and viola:
img {
display: inline-block;
margin: 10px 0; }
Are you trying to style all images a certain way, then exclude images within a certain container div? If your container div is called #wrapper, then do something like this:
#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
/* undo what you did above for images inside #wrapper */
margin-top: 0; margin-bottom: 0;
}
Such loose selectors for img can be troublesome because images are used all the time in different contexts. I prefer to style only images that are inside a #content div, or similar.
I'm currently redesigning my website from a table layout to CSS. I'm having some problems with what seemed like a very simple task.
The site is simple. A box in the middle of the screen that contains several links.
The old site used <td valign="center"> to center all the links in the box. CSS seems to have no equivalent. I've been centering elements using negative margins like so:
div {
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
}
This works fine when you know exactly how big the element you're centering is, but I need to be able to center the links without knowing how much vertical size the links take up. I just want the aligning in the box to act like text-align: center. Only vertically too.
Current website designed with tables
Current progress on the CSS version
You have 4, possibly 5 solutions one added to the bottom since it's a combination of different css from your original and js to set height:
Use a table cell and center it's content vertically
Use display: table-cell; vertical-align: middle; as css for your div
Update margin-top every time the div's height changes via javascript
Use css3 flexbox (you need to use vendor-specific extensions so it won't work on some older browsers)
Simple example using old-style flexbox - chrome version - add a wrapper div and set it's styling to this:
#wrapper { display: -webkit-box; -webkit-box-align: center; }
#wrapper > div { margin: auto; }
fiddle for this http://jsfiddle.net/gK7YU/
New style flexbox - also chrome version, you'll have to add the other vendor prefixes as well as the version without any prefixes in the final product.
#wrapper { display: -webkit-flex; }
#wrapper > div { margin: auto; }
fiddle for this: http://jsfiddle.net/LeHRD/
The fiddles contain a few more css properties so you can see what is happening easily.
Oh, sorry, you don't need the wrapper div, you can just center vertically any content with flexbox... well, anyway the solution I proposed can be combined with display: table-cell; so it works in older browsers as well.
You can also use absolute positioning with specified height jsfiddle.net/N28AU/1
#wrapper { possition:relative }
#wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}
you can calculate height from the contained elements and update it via js if you want to avoid negative margins.
I've been to your website and copied the html here.
You can do this:
<style>
#box{
display: table;
}
#box > div {
display: table-cell;
vertical-align: middle;
}
</style>
<!-- Your html part -->
<div id="box">
<div>
Link A
Link B
Link C
Link D
</div>
</div>
You must wrapped a div element inside #box because display: table-cell property won't work properly if you don't have a wrapper element that is set to display: table.
Your example here: jsfiddle
I'm having an issue getting the name div and time-ago div to float properly. For ex, the time-ago div doesn't seem to want to float to the far right. Here's my current HTML / CSS markup:
http://jsfiddle.net/stickboyski/qCWsk/101/
Any idea what's going on?
BTW, I am using SASS for the CSS.
The parent div of the time-ago div, .metadata clearfix has a display of inline-block. That causes its width to only be the size of its contents. You can either change its display property to block as demonstrated in this fork http://jsfiddle.net/maxbeatty/KJUrL/
.metadata {
display: block; /* to make width 100% of container */
.name {
float: left;
display: inline;
}
.time-ago {
float: right;
}
}