Can this be done in LESS?
I have a main container whose width I don't know. The width can vary, too, depending on the browser window width, etc.
Inside that container, I want to have 4 (or n) equally wide sub-containers (spans or divs).
Not knowing the actual width of the main container, is there any way to do some kind of calculation in LESS, that would simply refer to the main container's width as "the width" (for lack of better words), and then let me divide "the width" into 4?
PS: Feel free to correct or edit my question if I have used any confusing or incorrect nomenclature.
I think you are overthinking it, you can do this with standard CSS by using percentages.
HTML
<div class="container">
<div class="quarter">Content 1</div>
<div class="quarter">Content 2</div>
<div class="quarter">Content 3</div>
<div class="quarter">Content 4</div>
</div>
LESS/CSS
div.container {
width: 100%;
div.quarter {
width: 25%;
float: left;
}
}
Instead of float: left you can try display: inline-block if you want to play a bit.
JSFiddle example
Related
I have 2 divs side-by-side in a flexbox. The right hand one should always be the same width, and I want the left hand one to just grab the remaining space. But it won't unless I specifically set its width.
So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.
I guess I could leave it as it is but it feels wrong - like there has to be a way to say:
the right one is always the same; you on the left - you get everything that's left
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>
Use the flex-grow property to make a flex item consume free space on the main axis.
This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
A common example is flex-grow: 1 or, using the shorthand property, flex: 1.
Hence, instead of width: 96% on your div, use flex: 1.
You wrote:
So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.
The squashing of the fixed-width div is related to another flex property: flex-shrink
By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.
To disable this feature use flex-shrink: 0.
For more details see The flex-shrink factor section in the answer here:
What are the differences between flex-basis and width?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Basically I was trying to get my code to have a middle section on a 'row' to auto-adjust to the content on both sides (in my case, a dotted line separator). Like #Michael_B suggested, the key is using display:flex on the row container and at least making sure your middle container on the row has a flex-grow value of at least 1 higher than the outer containers (if outer containers don't have any flex-grow properties applied, middle container only needs 1 for flex-grow).
Here's a pic of what I was trying to do and sample code for how I solved it.
.row {
background: lightgray;
height: 30px;
width: 100%;
display: flex;
align-items:flex-end;
margin-top:5px;
}
.left {
background:lightblue;
}
.separator{
flex-grow:1;
border-bottom:dotted 2px black;
}
.right {
background:coral;
}
<div class="row">
<div class="left">Left</div>
<div class="separator"></div>
<div class="right">Right With Text</div>
</div>
<div class="row">
<div class="left">Left With More Text</div>
<div class="separator"></div>
<div class="right">Right</div>
</div>
<div class="row">
<div class="left">Left With Text</div>
<div class="separator"></div>
<div class="right">Right With More Text</div>
</div>
hope someone can give me a hand with this, I've searched but can't find anyone with the same problem.
I'm re-jigging a menu for my website and I need these .float-columns to appear next to each other, but in this set-up they appear under each other.
.main{
display: inline-block;
position:relative;}
.content {
position: absolute;
}
.float-column {
background: #FFF000;
float:left;
}
<div class="main">
<div class="content">
<div class="float-column">Column 1</div>
<div class="float-column">Column 2</div>
</div>
</div>
I can make them appear as expected by removing the position from the .content or removing the position/display from the .main, unfortunately I can't do this as it breaks the rest of the menu.
I've had limited success when specifying fixed widths for the .float-column and .content, but ideally I'd like to leave it flexible (so I can add as many columns as needed)
Is there any way around this? Am I missing something obvious?
JSFIDDLE
as per your requirement, you just need to remove inline block from the main class. That will make the columns align side by side.
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I've found a number of posts on stackoverflow that address similar problems to mine, but none of them are similar enough, and I just can't solve this... I have tabular output that may exceed a viewing area in width, height, or both. The output is accompanied by a header. If the output exceeds the height, the user should be able to scroll up/down, but the header must remain fixed. If the output exceeds the horizontal area, the user should be able to scroll left/right, and the header must move w/the content.
I've tried various combinations of overflow:scroll, overflow:scroll-x [and scroll-y], overflow:auto, w/the table header both part of the content, and separate from it. I've met w/only mixed success ; either I can get the header to scroll l/r along w/the content and it disappears on vertical scrolling, or I can get the header to remain fixed in case of vertical scrolling, but it remains fixed if the output is scrolled horizontally.
Here's a fiddle w/some html that I used as a starting point.
[code]jsfiddle code[/code]
Constraints
the output must be divs, as in the example. I can't use <table>
the solution must be css/html only, no j/s, jquery, etc.
Any help appreciated !
You can't achieve that with pure css/html even if you give an element position: fixed; or position: absolute;. by doing that you can't move the element because while scrolling element's position on the page does not change and it is impossible to get element's scroll value from css or html.
So the only solution you can find is in using javascript
If you can set a width to some of your divs this can be a starting point using pure css/html:
.row div, .head div {
display: inline;
}
.head, .rows {
width: 160px;
}
.rows {
height: 40px; // this height is set to force scroll
overflow-y: scroll;
}
.tbl {
width: 100px; // this width is set to mimic small width
overflow: auto;
}
<div class='tbl'>
<div class='head'>
<div>head 1</div> <div>head 2</div> <div>head 3</div>
</div>
<div class='rows'>
<div class='row'>
<div>data 1</div> <div>data 1</div> <div>data 1</div>
</div>
<div class='row'>
<div>data 2</div> <div>data 2</div> <div>data 2</div>
</div>
<div class='row'>
<div>data 2</div> <div>data 2</div> <div>data 2</div>
</div>
</div>
</div>
http://jsfiddle.net/jL4ch/
i figured this out. there are several things to take note of :
the widths can be made to function w/any inline block-structuring style, including inline-block, for example. you don't have to use table-cell. using only inline will cause the browser to disregard the width: elements.
it's pretty silly, but if you use overflow-x, you also have to state an overflow-y policy explicitly, or you get 2 scrollbars. the trick was to declare the axis w/the desired constraint as auto and the other overflow as hidden.
here is a jsfiddle that illustrates my solution. the fiddle has inlined widths because in real life, the tabular data will actually be generated dynamically and the column widths won't ever have the same values, as they do here in the example.
For an example on Bootstrap website
Ctrl +F "Nesting Columns". With a wide enough window both of the Level 2 columns are next to each other, but reducing the size so they don't fit anymore they nicely snug under each other. How can I do this?
I have an almost identical layout, except I have several divs stacked and 1 sidebar floated to the right. Something like this:
<div id="container"> //Width: 96%; margin: auto; max-width: 870px;
<div id="sidebar">Sidebar</div> //Floated to the right and "width: 26%;"
<div id="box1">Box 1</div> //Width: 68%; for every box# id
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
I can squeeze it together as I please and everything works, but as the width of the window gets reduced I want the sidebar to stack on top of the box divs like in the bootstrap example. If I reduce the width of the window the sidebar goes on top of the divs, but it is still floated to the right and just looks broken.
What you want is probably media queries.
http://www.w3.org/TR/css3-mediaqueries/
E.G.
#media screen and (max-width: 768px) {
// insert css rules here
}
With the above CSS code you would place the CSS rules you want to come into play for devices with a resolution of 768px or below.