I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
Related
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
http://jsfiddle.net/eDYDD/
Seen above is a jsfiddle that mostly explains what I'm trying to do. I can't seem to get the #main_info to fill the 100% height of #main, so the border will fill 100% of the div and you know, look nice. Any help would be appreciated.
In CSS unless a parent has a fixed height, you cannot make a child fill 100% of it's height, without some trickery.
You can use display table to make the elements behave like a table, ensuring that the child fills out the parent.
You can make it so the border-right in your case is visually managed by the parent element, using a background image.
You can use JavaScript to maintain the appearance of the two elements.
Which one of these applies to you really depends on your use case. Since your avatar info is simply a border-right at this point, creating a visual border on #main_info is probably the easiest way to go.
Using a table based layout would also solve this nicely, but would require extra markup to ensure that you have a table element, a row element and a cell element.
Use absolute positioning.
#main {
position: relative;
}
#main_info {
height: 100%;
position: absolute;
}
http://jsfiddle.net/eDYDD/3/
Take a look at Equal Height Columns with Cross-Browser CSS:
Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.
I modified your jsfiddle. The other answers miss out the easiest solution, which is to inherit your min-height property of the parent element:
#main_info {
width: 20%;
min-height: inherit;
border-right: 1px solid #E4E4E4;
}
I'm developing a 4 column footer in CSS, but after wrestling with this for a few hours there are two things that I cannot achieve.
1) Replicating the padding of the first column in the three subsequent columns
2) Extending the vertical border the entire 250px.
Does anyone have any ideas? Here is my code
http://jsfiddle.net/FdHAR/
The best thing to do here is to add a class, possibly footer-column, that you apply to each of the divs. Then put those four divs in a div with the class footer. Your structure would look something like this:
<div class="footer">
<div class="footer-column" id="footer_column1">...</div>
<div class="footer-column" id="footer_column2">...</div>
<div class="footer-column" id="footer_column3">...</div>
<div class="footer-column" id="footer_column4">...</div>
</div>
Obviously, we need to change the styles foor this to look right.
Padding
Let's address the padding first: all you really have to do is select the class and put some padding-left and padding-right on it. It will automatically apply the same padding to each one that way. Also, to make them appear side-by-side, we need to float them. Something like this will do:
.footer-column {
float: left; // Push the div as far up-left as it can be put
width: 25%; // Make sure to subtract the padding
padding: 10px; // We want padding on all sides to make things look nice
}
Now that that's done, let's fix the borders.
Vertical Borders
This is a bit more difficult, unless you know the overall height of the footer. Either way, we can use the CSS selector :first-child to apply the borders. This should do it:
.footer-column {
...
border-left: 1px solid black; // Whatever border you want goes here.
}
.footer-column:first-child {
border-left: none;
}
If you know the height of the footer, you can force that height, and the border will work just fine.
.footer-column {
...
height: 250px; // Force the box to be 250px tall
}
If you don't know the height of the footer, you'll have to use some other styling and possible javascript. But I'll assume you do since you stated a specific value in the question.
You want to use display: table and display: table-cell: http://jsfiddle.net/FdHAR/3/
1) Add
padding-left: 15px;
to #col2,3,4 moves the text off of the vertical white bar. You may need to play with the value to get the exact spacing you're looking for.
2) add height: 250px; to #container4 to make it the right size.
Caveats: this is after a few minutes of adjusting on safari -- your browser may vary...
Played with this a bit, I think this is closer to what you want and should work well across browsers. I'd recommend a fixed width or a min-width on the footer (<footer> is html5).
jsFiddle
Some constructive feedback:
Try to combine your styles as much as possible. No need to re-write and re-set padding, etc across similar elements.
You had div, inside div, yet were treating them like columns. A simpler approach is to use a list and think of each list item as a column. If you wanted to do divs, then don't put them inside each other.
I like to use em for setting font-size or line-height, but use px for anything else. (personal preference, makes sense since it's a screen you're usually working for)
Try to set only 1 or 2 specific strict sizes and then use percentages of that. A good thought is setting the footer font-size to 1.2em, then the h1 could be font-size 130% and smaller could be 80%. This also works well for width, etc. (each column is 25% of the parent).
a jsFiddle hint, you don't need to put the whole html doc there, just the part you want to fiddle with, same for css and jquery drop the ,.