I'm trying to figure out if it's possible to create a CSS layout where divs with float: left property would not create a new "row"-like layout but be really fluid.
To be more specific here's what I have now:
All blocks are div with float: left style, certain margins and unfixed height attribute. As you can see every high enough block forms a "line" or "row" with same height. What I'm trying to achieve is -- make all div element obey only their own margin style and not create a row with similar height.
So the question is if it's possible and if yes then how can it be achieved?
HTML (some blocks omitted):
<div id="blocks_wrapper">
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Web</div>
<div class="d_value"></div>
</div>
</div>
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Phone</div>
<div class="d_value"></div>
</div>
</div>
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Thu—Fri</div>
<div class="d_value">11:00—19:00</div>
</div>
</div>
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Pricing</div>
<div class="d_value">40 USD</div>
</div>
</div>
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Address</div>
<div class="d_value">0.2km from Historic U.S. 66, Seligman, AZ 86337, USA</div>
</div>
</div>
<div class="strblock rouded_3px infobox">
<div class="dElement">
<div class="d_option">Coordinates</div>
<div class="d_value">
35.52890, -113.23200<br>
N35°31'44", W113°13'55"
</div>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
#blocks_wrapper .strblock { float: left; margin-bottom: 3px; overflow: hidden; }
#blocks_wrapper .infobox { width: 19%; padding: 3px; }
#blocks_wrapper .infobox .dElement .d_option { display: inline-block; width: 90px; overflow: hidden; font-weight: bold; }
#blocks_wrapper .infobox .dElement .d_value { display: inline-block; width: 155px; vertical-align: top; }
I know it's late, but maybe this will help someone.
http://masonry.desandro.com
Related
In this CodePen, I am trying to get the .icon div to appear the full height of the div it's in. Unfortunately, it looks like it's loading before the text is there so the div has a height of 0 when it loads. How would I get it to load once the text is there and grab that full height? Preferably with no JS if possible.
All help is appreciated!
HTML
.faqSection {
height: 600px;
width: 100vw;
}
.topFaqSection {
margin: 100px 0 40px 10vw;
}
.innerFaqSection {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.leftFaq {
width: 35%;
height: 100%;
/* background-color: violet; */
}
.rightFaq {
width: 35%;
height: 100%;
/* background-color: blanchedalmond; */
}
.singleFaqBlock {
margin: 20px 0 0 0;
}
.questionBlock {
background-color: red;
display: flex;
flex-direction: row;
align-content: flex-start;
}
.icon {
background-color: blue;
width: 50px;
height: 100%;
}
.questionText {
/* display: none; */
background-color: green;
width: 100%;
}
.answerBlock {}
.answerBlock p {
margin: 0 0 0 62px;
}
.hiddenText {
display: none;
}
.notHiddenText {
display: block;
}
<div class="faqSection">
<div class="topFaqSection">
<h1>Questions? Look Here</h1>
<div class="bar blue"></div>
</div>
<div class="innerFaqSection">
<div class="leftFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
How do I earn a return?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
What kind of returns can I expect?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
<div class="space"></div>
<div class="rightFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
When is the platform releasing?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
Why invest in real estate? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
I'm a - and interested in raising money through -, what should I do? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
</div>
</div>
As I said in a a comment, removing the height: 100% rule should fix it for you. The "why" for it is a bit... unsavory.
Flex children default to "align-self: stretch", so they'll stretch naturally. But when you set a height, it will use that value. The problem is percentage height is calculated from the height actually specified for the parent and .icon's parent (.questionBlock) has no height specified: so .icon gets 100% of 0. If you were to set a height to .questionBlock, .icon would adapt.
From the specs:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
This is the comment that pointed me into the right direction. Maybe check it out?
I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here
https://codepen.io/anon/pen/RmMRQb?editors=1010
As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.
.container {
background: red;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I don't want the div to collapse. I already found a solution here
JQuery: Prevent div from collapsing when element hides()
but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.
I have added a secondary class for the default/native container. I think this is the best/easiest approach.
.improved-container {
background: red;
min-height: 40px;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container improved-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container improved-container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I tried various different methods to no avail, including using text-align: center; on the <div> and display: inline-block; on the <p> and <h4>. Since the I have 3 different text tags inside the div I'm trying to align this only makes the text look centered and not aligned to the left.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.media-body {text-align: center;}
p {display: inline-block}
h4 {display: inline-block;}
<div id="j2" class="jumbotron">
<div class="container">
<div class="row">
<div id="block" class="col-sm-8 col-sm-offset-2">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
</div>
</div>
</div>
This is the usual solution:
#block {
text-align: center;
}
.media-body {
display: inline-block;
text-align: left;
}
<div id="block">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
But Bootstrap sets the property width: 10000px; to the .media-body class. Therefore, you need to redefine this property as width: auto;:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#block {
text-align: center;
}
.media-body {
display: inline-block;
text-align: left;
width: auto;
}
<div id="j2" class="jumbotron">
<div class="container">
<div class="row">
<div id="block" class="col-sm-8 col-sm-offset-2">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
</div>
</div>
</div>
With how my HTML is structure I am having hard time selecting 3n child. It doesn't seem even notice the 3n selector of class heroLetter, but if I use the 1n child selector the code notices the class, but it also selects every div. I am not sure how to call the 3n child selector with this structure of classes I have made.
Code:
.heroLetter {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 600px;
color: #f5543a;
position: relative;
}
.windowWrapper .section .heroLetter:nth-child(3n) {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 200px;
color: #f5543a;
position: relative;
}
<div class="wrapper">
<div id="section1" class="windowWrapper">
<div class="section group">
<h1 class="introH1">
<span class="Grand">GRAND</span>
<span class="Stand">STAND</span>
</h1>
<p class="introP">A new font.</p>
scroll down
</div>
</div>
<div id="section2" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>STORY</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
G
</div>
</div>
</div>
<div id="section3" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>PROCESS</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
S
</div>
</div>
</div>
<div id="section4" class="windowWrapper form">
<div class="section group">
<div class="col span_6_of_12">
<h1>BEAM</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
<div class="circle"></div>
a
</div>
</div>
</div>
</div>
</div>
The nth-child refers to children of the same parent only.
You could adjust your code to refer to the outer most common element.
Some css like this should help you:
.windowWrapper:nth-child(4n) .section .heroLetter {}
In this case it's the 4th windowWrapper since it contains your 3rd heroLetter
I have the following html code
<div class="holder">
<div class="left"> DIV1 </div>
<div class="right"> DIV2 </div>
<div class="right"> DIV3 </div>
<div class="right"> DIV4 </div>
<div class="left"> DIV5 </div>
<div class="right"> DIV6 </div>
</div>
How to arrange div elements as shown on the image without changing their order in html code?
I agree with danielnixon that this isn't best practice and might be confusing if someone else will be editing your code at any point. I'd suggest to sort your HTML by the .left and .right classes to make it more intuitive:
<div class="holder">
<div class="left"> DIV1 </div>
<div class="left"> DIV5 </div>
<div class="right"> DIV2 </div>
<div class="right"> DIV3 </div>
<div class="right"> DIV4 </div>
<div class="right"> DIV6 </div>
I think the shortest route to what you want to achieve would be to float the divs with CSS like so:
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
DEMO: http://jsfiddle.net/xzgs61uw/2/
Additionally, if you want to move the divs closer together simply create .holder in your CSS and restrict its width, for example:
.holder {
width: 200px;
}
Hope this helps!
You could use simple CSS for this to manipulate the position of the div. Here is an example: http://jsfiddle.net/7uwzccs1/
HTML
<div class="holder">
<div class="left1"> DIV1 </div>
<div class="right"> DIV2 </div>
<div class="right"> DIV3 </div>
<div class="right"> DIV4 </div>
<div class="left2"> DIV5 </div>
<div class="right"> DIV6 </div>
</div>
CSS
.left1{
position: absolute;
}
.left2{
position: absolute;
left: 8px;
top: 25px;
}
.right{
position: relative;
left: 100px;
}
Use clear and float properties in CSS for each class. JS Fiddle
.left{
float: left;
clear: left;
}
.right{
float: right;
clear: right;
}