I have a layout with multiple divs side by side and the will be populated with random text in each div. Is it possible to have the height of the tallest get matched by the rest of the divs regardless of the amount of text they have?
Basically I need the divs to be height:auto; and lets say, the second div has so much text that it's height becomes about 200px and the rest of the divs only have enough text to make their height about 100px. Instead of the 200px div being the tallest the rest of the divs extend to match the 200px div and create a uniform look.
Is anything like possible purely using CSS or would JavaScript need to be used?
Sorry if this sounds confusing, I would post an example picture but I don't have enough points (boo!)
Fiddle
You could lay them out like a table as in this updated Fiddle
.container {
display:table;
position:relative;
border-spacing:20px;
}
.block {
display:table-cell;
position:relative;
width:190px;
height:100%;
background-color:FFF;
margin:0px;
padding:10px;
text-align: center;
border:solid 1px #CCC;
font-size:small;
}
Related
If I have a container div, with 3 divs within that div. And each of those 3 divs have a width of 33%. They fit perfectly inline.
If i add a 1 px border to the 3 divs it throws them off and are no longer in line and pushes the 3rd div under the other two.
How do i keep the 3 divs perfectly over the container, while still using a border to show the 3 divs specifically.
Here is the JS fiddle example, please see the divs with the "1" that I am having trouble with.
https://jsfiddle.net/p0yzrL0j/
Second question:
How can i keep the sizes fixed? so that any time the window is resized the divs shrink to match the window size rather than moving under each other.
I made an example with
box-sizing: borderbox;
https://jsfiddle.net/8c644nhv/1/
You can increase the border size and it will not add to the div width.
You can use
box-sizing: border-box;
That includes any border and padding that the boxes could have with the total width and height. W3C Reference
Grid systems usually have this applied using universal selectors.
*,after,before {
box-sizing: border-box;
}
Another way, if you don't want to use "box-sizing: border-box;"
Use calc().
Since your boxes have 1px border. That adds 1px to the left and 1px to the right. So you have to minus 2px from the 33% width.
#stats {
width: calc(33% - 2px);
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution
.one{
width:33%;
height:100px;
border:1px solid red;
float:left;
}
.two{
width:-webkit-calc(34% - 7px);
width:-moz-calc(34% - 7px);
height:100px;
border:1px solid blue;
float:left;
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution
<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>
I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?
There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.
I'm currently loading some Masonry items into a table-cell, the problem is that the browser has trouble calculating the width of the table-cell so the Masonry elements won't realign themselves when I adjust the browser width.
This article seems to discuss a similar problem but I can't get it to work here
The css looks like this and the Masonry Items are loaded into the #Gal1 element.
div#wrapper{display:table; height:100%; width:100%;}
div#sidebarWrapper{display:table-cell; min-width:40px; height:100%; background-color:#444;}
div#contentWrapper{display:table-cell; height:100%; position:relative;}
div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;
padding-bottom:100px; margin-top:195px;}
div#masonryGal{max-width:1600px; position:relative; height:500px; overflow:hidden;}
#gal1{}
I've seen around the web about making a transparent image 100% width so that it fills up the container with something? Is this the way to go and would I have to have it repeat inside the element #contentWrapper?
How would this affect my jquery?
jQuery(document).ready(function($) {
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reload');
});
Again, the problem here is that I'm using Masonry inside a table, I'm using this inside a responsive layout and it's just the situation I'm in right now so please no "use a div".
absolute positioned elements (masonry use position absolute for blocks, to calculate their positions, and their container can't be display: table or table-cell) can't be inside table or table-cell
Update
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
I have three components, a #parent, and 2 of it's children #top and #bottom.
#parent is not of a fixed size.
#top has children that are floated, and does not have a fixed size (it's children can change size). To fix it's height because of floating children, it uses this:
#top:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
I want #bottom to take up the remaining height in the parent, If I use height:100% like normal it makes it overflow the same size as #top's height.
I have also seen people use overflow:none; but this makes some of my content in #bottom get cut off.
How can I make #bottom take up the remaining height in #parent?
EDIT: I made a jFiddle to show the problem. Also, I need to support back to IE 7. I am open to using Javascript/jQuery.
if you float the top element then use height: 100%; this should solve the issue:
#top{
background-color: blue;
width:100%;
float:left;
}
see: http://jsfiddle.net/SKkAp/1/
What this does is now bottom actually fills the full parent since top is floated. But the content of bottom is pushed out of the way of the floated top making it appear as if bottom is filling the remaining space, where it's really filling the whole parent. Hopefully you can make sense of that. Haha
I have two divs that I am using within a fieldset to keep separate some of my page areas
<fieldset style="padding: 20px, 20px, 20px, 20px; background-color: #EAEAEA;">
<div class="col1" >
...
</div>
<div class="col2">
...
</div>
with the following style:
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
}
.col2 {
float:left;
width:90%;
}
First, I wanted to have a little way of visually separating them, so I added to col1:
border-right:2pt solid black;
Well, this added the black line, but now my col1 div is ABOVE my col2 div. How can I correct this? I thoguht maybe it was a margin thing, but adding 2pts of right margin didnt help.
Also, I'd eventually like to make this divider a place where I can pan left/right to resize the two div relative to each other (i.e. make one 30% wide, the other 70%, or 10%, 90% etc)
Since your using % as your width you are using 100% of the screen resolution so you need to reduce the width of col2. Since your adding a 2pt border which essentially takes you over the 100% you need to make sure you adjust the width. You could either adjust col2 or col1, I adjusted col2 below for you.
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
border-right:2pt solid black;
}
.col2 {
float:left;
width:89%;
}
Example
You can't add a border to a screen that is already 100% filled.
Eg. if your screen is 1000px, and you have it split in 10%/90% you now have two objects that are 100px and 900px respectively. Adding the border would make it 102px and 900px which gives a total of 1002px (2px bigger than your screen) and therefore it'll wrap.
Either use fixed sizes for the width or put another container inside it.