I'm working on a grid and I am trying to figure out how to make two divs, which are display:inline-block match each other in height. Is this possible using just CSS?
For example see this JS Fiddle here. The green area I would like to be 100% of it's container, so that it matches the left container.
http://jsfiddle.net/franhaselden/kqtLkkz6/
The divs use the following grid CSS:
.grid {
vertical-align:top;
font-size:0;
box-sizing:border-box;
display:inline-block;
font-size:0%;
}
.grid.golden-small {
width:61.8%;
}
.grid.golden-large {
width:38.2%;
}
I tried explicitly stating the height of the parent container, by doing height:auto so that it would fit to the content inside it, but this didn't seem to work. See my second example here:
section {
height:auto; /* and added this */
}
.featured-post .featured-text {
height:100%; /* added this */
}
http://jsfiddle.net/franhaselden/kqtLkkz6/1/
If I where you I would make a table instead. inline positioning is very difficult to use. I would try remake it by making a parent element that contains all the elements you want to stack inline to display:table; and the child elements to display:table-cell; play around with it is my advice
Take a look at this.
Set the display of your parent element to table, .featured-post {display: table;} and the display of the child elements to table-cell, .grid {display: table-cell;} I guess this is the easiest solution (you can check here) It will work at least that you set position:absolute but I don't think that's your case.
Related
I have a grid with an image in a column of size small-12 and I want to add next to it on the right side an element, for example a div. The column must be of size small-12 so I can't set it to small-11 and add the div next to it with a size of small-1. How can I do this? Is this related to CSS pseudo elements or classes maybe?
I tried to place it with CSS and position: absolute; but it is not where I want it - like there is a minimum margin to top and side for elements so top: 0vh; won't work.
See this CodePen snippet: http://codepen.io/anon/pen/akwjgg
I'm not sure if using absolute position is good and also this breaks the responsiveness. Also the mail icon should be at top without margin-top as like as the small-12 column. So how to do it correctly?
Please reply with a way without using SASS because I'm using an online CDN where I can't control the variables.
You can set the row's style (Or in your example's case, the div with the ID '#big_column' to have position:relative; instead of position:initial; - This will allow elements within it to utilize its location and boxmodel properties for determining their own position if they're set to position:absolute;
see updated codepen:
http://codepen.io/anon/pen/JKJabd?editors=1100
relevant CSS:
#big_column {
background-color: #ccc;
position:relative; /* Position:absolute... */
height:3em; /* ... elements inside will use the...*/
padding:1em; /* ... lowest ascendant element set to Position:relative; */
}
#mail {
display:inline-block;
right:1%;
bottom:-0.25em;
position:absolute; /* Uses #big_column's box-model properties (like dimensions, location, etc. to define the appropriate/relevant properties of its own */
}
I have 2 div(s) that they have been floated to left.(At the left bottom)
I have done the following code for the 2nd div:
#div2
{
float:left;
clear:left;
}
here the clear property forces the 2nd div to go down because div1 is also floated to left.
Is it possible make the 2nd div go upper than div1 when clear property is set?
Thanks
edit(added screenshot):
What you describe is fundamental box-model behavior. Part of the definition of 'clear' is that nodes clear down. There are a variety of strategies (JS, various positioning hacks) for putting things in an order different from how they appear in markup, but the best strategy is to just rearrange your markup.
No, this is not possible, #div2 comes after #div1 so it will always follow it whether vertically or horizontally (when both are floating).
The only solution here is to move #div2 before #div1 in the document, whether in the HTML or by manipulating them with Javascript.
no, It is not possible as has already been explained by previous answers
If you want to switch the divs you can try this fiddle that change the display css property
http://jsfiddle.net/S4975/1/
.div2
{
display: table-header-group;
}
.div1{
display: table-footer-group;
}
html
<div class="div1">A</div>
<div class="div2">B</div>
in this way who has display: table-header-group will render before elements with display: table-footer-group;
refer this
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.
I have background-image in parent element and 2 sub float elements. As above description says, its (parent element)height collapses to zero whenever it has only float elements. How can I fix it? I dont want to add height or any content to parent tag. I want height of parent element to auto-increase in accordance to content of floating elements? How can I achieve it?
you have different ways to manage floatting element and include them in the flow. Parents or aside elements needs their layout to be trigger in a way, it calculates room/space used by floatting elements.
here is a few ways that you can apply to your snippet :
/* different ways to play with layout */
.outerdiv:before { /* add classname in document to be abble to relat it to css rules applied , demo purpose */
content:attr(class);
position:absolute;
margin-top:-1.2em;
background:yellow;
}
.outerdiv { /* demo purpose , we stack them */
clear:both;
margin:1em auto;
}
/* here we go ========================================= */
.clearafter:after {
content:'';
display:block;
clear:both;
}
.displayib {display:inline-block;}
.displaytb {display:table;}
.overflowh {overflow:hidden;}
.overflowa {overflow:auto;}
.overflowv {overflow:visible;} /* defaut, doesn't trigger anything */
.float {float:left;}
http://jsfiddle.net/Xq2We/1/ you can see each possibilities and see what it involves as result.
To go further and understand better you can read this : http://css-tricks.com/all-about-floats/
add
#parent{
overflow:auto;
}
or clear floats using available techniques
I read this artical http://css-tricks.com/implied-block/.
I test it in my own chrome browser, yes, using float style generate the display:block style.
As I known display:block means that the element becomes the block-level element, and it occupies the whole line. Next element should starts in a new line.
But I test the float property. Although it generate the display:block, the next element(also float) is still in the same line. So what's the matter with it?
<style type="text/css">
span
{
width: 30px;
margin: 0 10px;
background-color: Red;
float:left;
}
</style>
<body>
<span>222</span><span>323</span><span>dd</span>
You need to clear the float in order for the "floated" element to break to the next line. You can replace the span element with a div and you will see the same effect.
You can try this blog, this might help you to understand more about float
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
If you just want each of the spans to occupy a new line then give them each:
span { display:block; }
And remove:
span { float:left; }
A div would also accomplish this without css.
The description is kind of confusing, but I have two divs. One which sits on the left on the page, one which sits on the right via floats. The one on the right is first in the HTML, the one on the left is second. Basically, i want to have it so the left div sits on top, and the right div sits below it. If Left and Right were in order on the HTML, it would be as simple as removing the floats. However, since this is not the case, i need a bit of a hand. Here's a jsfiddle i have setup: http://jsfiddle.net/7bTjj/
Back in the day you would have to use absolute positioning. Now you can resolve this issue using CSS3 properties created for managing layout.
Use display:box and box-ordinal-group properties to display the contents of your .container in whatever order you like, without using floats at all:
(-webkit vendor prefixes only for simplicity)
.container, .left, .right {
display:-webkit-box;
-webkit-box-orient: vertical;
}
.left {
-webkit-box-ordinal-group: 1;
}
.right {
-webkit-box-ordinal-group: 2;
}
Since you're targeting mobile, IE's lack of support should not be a problem.
Here's my fork of your fiddle.
Isotoma has a nice, readable introduction to flexbox that I referenced while tweaking your CSS.
If you know the height and width of the elements, it's possible with margin.
.left {
height:20px;
width:70%;
float:left;
margin-left:-30%;
}
.right {
width:30%;
float:left;
margin-top:20px;
}
Demo
If you don't, JavaScript may be necessary. Here is a similar question.