Please look at this fiddle: http://jsfiddle.net/FnED8/3/
The projects grid items on the right always clear below the #nav element on the left once they pass the first row, I want the items on the right to always stay aligned and never clear. Obviously I can set the height of #nav to something big like 1000px and get the desired result but this isn't the answer.
Essentially I want #nav to be 100% height and #projects to respect this and never clear below, always staying beside it.
Edit - #projects is 90% width to make the grid semi-fluid, this shouldn't affect this problem.
Make your projects-grid like this:-
#projects-grid {
float: left;
width: 300px;
}
http://jsfiddle.net/FnED8/4/
Or whatever width you prefer.
Matt
One possible solution is to set display: inline-block on the #projects-grid element. however bear in mind that you will need to adjust the width, because 90% is too wide to fit next to the #nav.
Updated Fiddle
Is this what you are trying to achieve? http://jsfiddle.net/thebabydino/FnED8/7/
Setting a proper left margin for #projects grid and removing its width of 90% does it.
#projects-grid {
margin-left: 174px;
}
Related
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
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.)
This is my site.
I'm attempting to get the black div to break out of the parent div and span the width of the browser.
I'm trying to do this with negative margins.
Like so
.aboutTop {
background-color: black;
width: 100%;
height: 600px;
position: relative;
margin-left: -100px;
margin-right: -100px;
}
Note: I've tried it with margin-left: -100%; just using the above to see what's going wrong.
However, the margin-right isn't working.
It just shifts the box to the left by 100px.
Why is this?
The margin-right property is funny to play with, when you are left aligned, it creates space to right instead of moving to right. Having answered on of your previous related question, I must say, just increase the width to fit the screen, instead of adding negative right margin. You got the box to left corner, increase width now, and make it fit the page.
HERE's what you must do.
Pick up the entire division and move it out of the parent that is containing its width
USE:
#yourdiv{
position:absolute;
top:200px;
left:0;
background:black;
width:100%;
height:200px;
}
Do it the simplest way... Instead of messing around. Get it out of that damn parent div.
Remove margin-right and adjust it with margin-left.
You set your width to 100% (so thats 100% of the parent)
You say you want to break out of the parent width at both sides!
This goes against each other
The left margin is doing its job like supposed and the right margin isn't because the 100% limit is reached!
Delete the width:100%; and you're good to go!
[EDIT]
Above doesn't solves the 100% width of the browser issue
Mayby thats possible with some javascript?
var screenwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
and then something like
document.getElementById('aboutTop').style.width = screenwidth;
This requirers you to change the class='aboutTop' to id='aboutTop'
This problem is probably quite easy to solve but I'm not sure what I do wrong.
I have the following code:
HTML:
<div class='absolute'>
<div class='container'>
<span>blabla</span>
unknown number of spans..
</div>
</div>
CSS:
.absolute{
position: absolute;
bottom: 0px;
right: 0px;
}
.container{
float: right;
}
span{
display:block;
float: left;
}
Basically what I want is to have all the spans in one straight line at the bottom right. The absolute div works perfectly and container div float right exactly like I want. The problem is that the spans refuse to line up in one row. I get the following look:
The red is absolute div, the blue the container div and the green the spans. Well you see my problem..
I have tried to give the container div a width. This result in a straight horizontal line, like the one I want, except that the spans float to the left as far as the width of the blue container div. And I can't calculate the width because I don't know the number of spans.
So how do I solve this without changing any order and without setting a width to the container div? Or rather, why does the container div shrink at all and not just stay as wide as the floats wants it to be?
Thanks for any answer!
change display:block to display:inline-block?
Change you span to:
display: inline-block;
should make them go next to each other.
This isn't supported in IE7 or earlier though, if that's important to you, you can do this:
display: inline-block; *display: inline;
Oh and remove the float left on the span.