I'm new to flexbox, but I'm assuming it's the best tool for what I'm trying to do. (If not, I'm open to other ideas.) I have a set of features of a "product" - something like this:
<div class="flexbox-container">
<div class="borderbox flexbox">A paragraph of content about the first feature...</div>
<div class="borderbox flexbox">Another paragraph of content about the second feature...</div>
<div class="borderbox flexbox">The third feature...</div>
</div>
...with 12 boxes in all. See http://codepen.io/OsakaWebbie/pen/kkyYOp to see my real content with a klugey way of getting something close to what I want. What I really want is to define a common height for the boxes and then let flexbox adjust the widths based on the content (minimizing dead space after shorter paragraphs), but I can't figure out how. flex-basis:auto sounds relevant, but it didn't have any effect on the layout. I tried this CSS:
.flexbox {
height: 8em;
min-width: 8em;
max-width: 20em;
}
But it ignored the min-width and made everything the max. Currently I'm having to tweak the markup and specify a width (or a class equating to a width) for each box based on its content, but I'm hoping to get the power of flexbox to do that automatically. Is it possible?
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 7 years ago.
I want to go from this
to this
In the first one, the img is responsive widthly. Its width is set to 100%, using bootstrap's .img-responsive.
However, to achieve the desired effect in second pic, we have to leave out part of the images'. To do this, one approach is to set the container of img to a fixed width and height, code goes like this:
<div class="col-md-9">
<div class="col-md-4 img-container">
<img src="" class="img-responsive">
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
(To use folloing approach, delete the `img-responsive' helper above.)
.img-container{
height: 148px;
width: 148px;
img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
}
However, using Bootstrap's grid to define every <div>'s width.,I don't want to set its witdh and height to a fixed value. That is, I want each <img> or its container to scale according to the col-md-*.
How can I do that, without using fixed width and height? Or put it simply, to set the height according to the width? (or just how to make a square)
I have faced a similar need when building with Bootstrap's grid. I turned to JavaScript (requires jQuery) in order to remedy the situation. Here is my solution:
https://gist.github.com/SimpleAnecdote/d74412c7045d247359ed
It's called squareThis() because at first I used it only to make elements square, then I expanded it to mould any element into a rectangle with the help of a ratio. All you need to do is call the function after DOM is ready with any jQuery selector, #ID or .class:
squareThis('.classOfElementsToBeSquared');
The example above will default ot a ratio of 1:1 which will create a square. You may also call the function like this as well:
squareThis('.classOfElementsToBeMoulded', 0.67);
Which will create a 2:3 ratio rectangle (horizontal). You may also:
squareThis('.classOfElementsToBeMoulded', 1, '300');
Which will create squares out of your elements ONLY if the viewport is bigger than 300px.
In your case, I would use Bootstrap's col-md-* classes, add to all the grid elements a class like .square-grid and then:
squareThis('.square-grid');
I hope this function helps you. Please do let me know if you've got any questions about the function, ideas for improvement, etc.
Good luck!
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}
I have a two-column layout, composed of fixed-width floated divs. Inside the first column is an extra wide element. So the html layout looks something like this:
<div id="container">
<div id="column1">
...short content...
<div id="extra-wide">
...wide content...
</div>
</div>
<div id="column2">
...long content...
</div>
</div>
As annotated, the first column contains a short amount of content and the second column contains a long amount of content. The CSS looks something like this:
#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }
So the extra-wide element is actually wider than its parent, column1. And I don't know the heights of any of the elements ahead of time -- they are all variable.
The issue here is that column2 appears overlapped over the extra-wide element in column1. Here's a jsfiddle to help visualize this: http://jsfiddle.net/e3KNg/ (This fiddle has some content inserted and colors added to make what's happening more clear). Here's a screenshot:
Without altering the basic HTML structure or the widths of the three elements, is it possible (without the aid of Javascript) to force the extra-wide element in column1 to appear below column2? Here is the effect I'm trying to achieve:
I know this can be done by rearranging html elements or by using Javascript, but I'm looking for a solution within the above constraints. I tried using clearing divs in various places, removing or adjusting floats, and trying some overflow settings, but could not achieve the effect I was looking for.
looking at it, without set heights on the content elements or using javascript to work their heights out or set positioning on the extra-wide element, what you are looking for can't be achieved.
Heres a fiddle which works using an absolute positioning of the extra wide element and a top value, as well as using some clever css to make the columns the same height.
http://jsfiddle.net/yKRu4/1/
As i siad this works, but i honestly feel what you are looking for can't be achieved with the restrictions you have put in place.
This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.
And when you re-size the browser, they all re-adjust perfectly?
anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?
There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.
That's just a six column layout. Easily done with 6 divs:
<div id="container">
<div class="column">one</div>
...
<div class="column">six</div>
</div>
As a fluid layout:
#container { overflow: auto; }
div.column { width: 16%; float: left; }
You can of course fix the widths too.
Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.
The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.
The functions:
Figures out the maximum number of columns based on the body width, box width and margin
Sets all divs with a class of box and boxInterior to have absolute positions and set their width
Goes through each box and calculate the left and top positions.
I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.
I have this code:
<div id="body" style="height: 295px; width: 427px; position: absolute; top: 261px; left: 284px;">
<div id="header">
Some dynamic text<br/>
Some dynamic text<br/>
</div>
<div id="Content">
<textarea id="text" style="width: 100%"> </textarea>
<input type="file" style="width: 100%">
</div>
<div>
</div>
I want to set content div to fill remaining space of its parent. The text is generated server side and it causes the height of the header to change.
The output should look like this: file input should be at the bottom of the content with text input filling remaining of the Content. Content itself fills remaining of the Body, which height is influenced by dynamic text.
I am interested only in CSS solution, as this is easy to do with JS. Also, only width and height of the Body div can be hardcoded.
EDIT:
Some clarifications:
Body is fixed size
Header is dynamic size, can be of any height. If its height > #Body.height, the rest will be cropped and #Content height will be 0. Alternativelly, if possible, #Header could be limited to max half of the #Body with the rest cropped or scrollable.
Content doesn't need any special clarification. It contains of fixed file input and dynamicly height textarea
Thx.
here is a test page showing the html in question:
http://programmingdrunk.com/test.htm
ive taken the liberty to adding colored borders to see what is going on.
edit: now the above link has a solution. it looks a bit strange in firefox, ill see if i can fix that
edit 2:
final solution as can be seen in the link above is this (let me know if i misread your spec)
#text, #Content {
height:86%;
}
I can't understand how such a basic thing as control anchoring (or docking) is not something you can do in CSS. The language that is used for presentation not having fundamental thing is just insane...
Anyway, the above thing probably can not be done in CSS as CSS element is not aware of other elements. Or maybe it can, but such solution will certanly include CSS hacks.
I settled with JQuery LayoutManager framework for now.
Adding float:left to #header will cause #content to fill remaining space, not sure how to achieve the text area though.
Your html makes it really really hard to do what you want. Also, you have not told us what should happen if the content is too high to fit one screen.
Your description makes it sound a bit like you'd want something like:
http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/
In order to get good replies, please consider changing of the html structure.
EDIT:
Okay, what you want is just not doable if you want ie to behave. If we drop ie or no-js limitations, then there is a small chance in doing this with table-style layouts. But this is really weird request and you should consider really hard why do you want to do it like this at all.