I've started to write a design for my video streaming site.
http://www.xjerk.com/new.site/ [SFW]
The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.
However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.
I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).
Is there any way this can be achieved, or would a fixed width design be my best bet?
PS: I hope I've explained everything well enough.
Use media queries to set break points for the blue bars size.
Have you tried setting the video_box to a % of the width?
This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.
For exmaple:
.video_box {
margin:1%;
width:31%
min-width:100px;
height:370px;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #d0d0d0;
background-color: #ffffff;
float: left;
Related
I know that float takes element out of normal flow partially. What came to my surprise was that I observed the next div of a floating div taking the space of floating div too. Example:
.header {
float: left;
height: 100px;
width: 100%;
background: green;
padding: 10px;
background-clip: content-box;
}
.footer {
background: yellow;
border: 1px dotted red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">HEADER</div>
<div class="footer">FOOTER is yellow with red border</div>
</div>
Here the yellow footer comes after the green header, but the way it behaves is as if it were the container of header. The border is drawn out of both header and footer. In principle, footer should draw border only around itself. What is the reason for this behavior?
Another surprise is the green color(background) opaques the yellow one. Is this how stacking order works? Is it normal that div later in html order comes below the former divs in stacking order?
Please give reference to explain the behaviors.
This behaviour occurs because as you said floated elements are taken out of flow and so the element next to them rise up and take their space. But floated elements are taken out of flow only partially. Partially, in the sense that elements next to them ignore them like they are not in flow anymore, but the content within them still respects these floated elements and hence is pushed horizontally or vertically.
You can think of floated elements like floating above other elements. Also, the content of other elements is also sort of risen above them. So, their plane (or background-color) goes below floated elements, but the content is pushed downwards (or horizontally).
Regarding your particular case, you should remember that element next to floated element always takes up the space of the floated element. In your demo, it seems slightly confusing because your floated element has width set to 100% which causes the next element's content to push downwards not only horizontally. Hope that makes sense?
Analogy
As an analogy, you can think of all html elements as 1cm thick wooden boards, with some thick alphabet blocks placed above them. Somewhat like this image below:
Now suppose you have two such elements, first is header with alphabets HEADER and below that footer with alphabets FOOTER.
When you apply float: left to header element, it rises 1cm above the surface and floats towards left boundary of the page. Now, that it's not level with its next element, its next element rises up and towards left as far as it can. But as the floated element has risen only 1cm above, only the bottom wooden board of next element goes up, while all the alphabets get pushed down by the floated element.
I have two divs. One that is floated left and one floated right. The one of the left has a width set to 18% and a min-width of 217px. I want to have the div on the right take up the remaining space, while also being able to resize to fit the window.
The problem I am having is that I can set the right div's width to 82% and to float right, which works until I make the window side too small, in which case the min-width of the left div kicks in and it stops shrinking. The right div doesn't have enough space to fit, so it is pushed down.
Here's some sample code.
HTML
<div id="div1">
stuff inside of it
</div>
<div id="div2">
stuff inside of it
</div>
CSS
#div1
{
float: left;
width: 18%;
height: 100vh;
min-width: 130px;
box-shadow: 0px .3em .2em #000;
z-index: 2;
}
#div2
{
width: 82%;
float: right;
z-index: 1;
}
So this is where I'm stuck, how should I approach fixing div2? I've tried using a table instead of divs, but a border appeared around the cells that I couldn't change and it removed my box-shadow, so I would prefer a solution without it.
Your thinking of using tables is somewhat on the right track, as table elements do actually have many properties that make them capable of such a thing, but as people are pointing out in the comments, it's no longer a valid approach to use table elements for the purposes of layout for non-tabular data.
This is why CSS implemented a set of style rules built to reflect those unique properties. You can set a container around two elements with the style display: table;, and then give it's children the style display: table-cell;
Setting the width for the right side div to 100% will ensure it always fills as much space as is available to it.
But, since table cells can't break to a new row when the content exceeds the width of the table, it will automatically adjust to fit. So when another div (the left one) has a specific min-width, the div on the right is given less space in order to keep the cells contained.
Here's an example using your code:
http://jsfiddle.net/Q5rjL/
CSS table display properties give you all the benefits of these unique elements, but without the semantic issues. They are great for complex layouts where other style display types fall short.
You can also contain floats with overflow:hidden:
#div2{
overflow:hidden;
z-index: 1;
}
The DIV will fill up the remaining space (http://jsfiddle.net/MAjwt/)
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)
I have a fluid width layout. Left and right column have a fixed width and my center column changes its width in between max and min width specified as the browser width changes or screen resolution changes. It looks like image below:
As you can see, there are some small containers in middle column, they hold up several products etc.
The problem that I am experiencing is that when the width changes and middle column cannot accommodate 3 containers, 1 will fall below, as they are floated and then it looks like something below:
Now this space that comes in the right of containers looks ugly. What I want to do is to keep them centered if one falls below when width decreases then two should appear in the center of the middle column and when another one falls then 1 container left should also appear in the middle like below:
Can I do this with css only? or I need to introduce some scripting language for doing it dynamically?
This is the css for container, that I am using
.prod-container{
float: left;
width: 180px;
height: 290px;
margin: 2px 6px;
border: 1px solid black;
}
Example on http://www.myappontest.heliohost.org/index1.html
Replacing float: left; with display: inline-block; in .prod-container's style and adding text-align: center; to #center-content-container's style will achieve the desired behavior.
Working version of your page: little link. Here's the modified CSS file, too: another little link.
Hope that helped you in any manner!
I would put the center floating blocks inside a div with a max-width 100% (in the scope of the center column). Center that block with "margin-left: auto margin-right: auto". This will keep the floating blocks moving to the next line if there's not enough room, and the centering div will size with it's contents, allowing it to center within the center column.
Is there any way I can force a floated div to shrink instead of going to a new line?
I know I can set implicit widths on the divs but it's on a menu which might have variable amounts of items in it. I'm trying to do this while keeping the site's layout fluid if possible.
#left {
float: left;
border: 1px solid #000;
}
#right {
float: right;
border: 1px solid #000;
}
<div id="left">
<p>This div represents the logo</p>
</div>
<div id="right">
<p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
</p>
</div>
Basically, I want #right to begin shrinking when the browser window is shrunk rather than having it drop a line first, then shrink when the window is further resized.
Have you tried experimenting with giving these two divs relative (such as a percentage) widths?
When you float without explicitly declaring a width, either fixed or relative, the dimensions will default to 'auto'. Auto will force the div to be the width of it's content. When the browser shrinks, the content will still force these boxes to that width, until it is forced to collapse by touching another element.
Using auto widths is not the best way to achieve fluidity in your layout. You'll need to specify some kind of relative dimension somewhere, otherwise this problem will be entirely unavoidable.
There are lots of resources out there which can help you achieve a more fluid layout (a lot of articles on www.alistapart.com discuss this in quite some depth).
CSS's display property, set it to inline and the div will behave like a span.