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;
}
Related
I'm having trouble getting my divs to line up horizontally.
Here's my html doc: https://gist.github.com/Keenangp/9def2bd08eb6244bcf2d
I don't have enough rep to post the style sheet too, but it goes:
.container {
width: 80%;
margin: auto;
}
.column {
display:inline-block
}
.image {
display:inline-block
}
Here's the page: keenansportfolio.bitballoon.com/about
Some things I've tried while going through previous solutions here:
When I check the divs in Chrome dev tools, I see that the inline block property has been applied, and there are no errors in the console. I've tried removing the container rule, removing the container div, so the other divs aren't nested. I've tried using a smaller image, combining the property with float: left, and applying inline-block with the class>direct descendant as a selector. I've also tried each div by itself, and applying the vertical-align: top property in case the baseline was interfering with it, and opening it in different browsers.
This is for an exercise, and I wasn't told to edit any other values or add any other properties. I'm kinda stumped.
You want to align three columns in a row if I get it right.
You have to set width of each columns and sum of those are not supposed to exceed container's width. Set width for all three columns (ex:32%) and if you want to align them even if sum of their widths exceed the container's, add this property to container; white-space:nowrap.
You have to set 'div width' for "image","column" classes. For example,
.image, .column
{
display: inline-block;
width: 30%;
}
I have a layout, where I have to make a vertical centeret, with a rotated text inside.
See fiddle: http://jsfiddle.net/C7mCc/3/
I use display:table; and display:table-cell; to make the vertical centering, which is working good.
The HTML
<div id="top-banner-advertising-text" class="v-center">
<p class="v-c-content">Annonce</p>
</div>
and the CSS
.v-center {
display: table;
}
.v-center .v-c-content {
display: table-cell;
vertical-align: middle;
}
But I only want the #top-banner-advertising-text to have a width of 15px. Like in this fiddle: http://jsfiddle.net/C7mCc/4/ where I have removed the .v-center and .v-c-content and therefore do not have the text vertical centered.
How can I control the width of the div?
This ended up being a lot more complicated than I expected. To control the width you must take into consideration your parent divs. There is an excellent explanation of this here:
100% height block with vertical text
Although this in order to help you out I went ahead and figured out how to switch this code up to swap the text to the other side of the img for you.
my jsfiddle:
http://jsfiddle.net/C7mCc/6/
To answer your questions, "How do I control the width".
This is done by taking the following lines in the css and making sure they match,
padding-left:2em; /* line-height of .wrapper div:first-child span */
width:2em; /* line-height of .wrapper div:first-child span */
height:2em; /* line-height of .wrapper div:first-child span */
line-height:2em; /* Copy to other locations */
Remember since your vertical now you must think about the padding left.
basically your line height padding left width and height come in to play.
We control them with em in order to make sure they are sized correctly.
Let me know if you need anymore help.
Sounds like you're looking for the not selector:
/* if it must not have the vertical centering class */
#top-banner-advertising-text:not(.v-center) {
width: 15px;
}
http://jsfiddle.net/C7mCc/5/
Alternately, you could leave the width as you have it in your 2nd example and add this:
#top-banner-advertising-text.v-center {
width: auto;
}
to set a width for an element displayed as table, you use : table-layout:fixed;
But you do not say that you want as well to rotate a text.
To rotate that text, you will need white-space:nowrap if more than one word (15px is really small).
to replace that text in middle, you will need translate(); and set that text in a container displayed as a table, so it expands over 15px and makes translate usable.
here an example with 2 version rotated 90 and -90 degres : http://codepen.io/gc-nomade/pen/JuAio.
For older IE, search for the old writing-mode http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx ;) .
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 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.
i have two divs, that float correctly in chrome, ff and safari but not iexplorer, the right div appears below the left div floated to the right- the two divs are wrapped by an outer div with a width of 800px;
<div class="b_left">
</div>
<div class="b_right">
</div>
.b_left{
width:350px;
margin-left:80px;
float:left;
display: block;
}
.b_right{
float:right;
width:350px;
height:280px;
background-color:#c8c8c8;
display: block;
}
when using divs for columns, which I assume is what you are intending for this, it is better to only float one of the divs.
Say i have a div called content which is 600px wide and inside it two 300px divs inside, leftblock and rightblock. Instead of floating leftblock left and rightblock right I instead float the leftblock left and put a 300px margin-left on the rightblock. This pushes the rightblock to the right and ensures room for the leftblock to fit in beside it while preventing IE from displaying weirdly.
Hope this helps
it is a bug of ie, it doubles the margins. you must add display inline to the .b_left.
display: inline
I created a quick jsFiddle here: http://jsfiddle.net/6JWq9/
And it shows up just fine. I suspect you have other code that adds padding or a margin.
Review my example, let me know what is different from yours and I can update my answer.
Just put margin: 0; padding: 0; on all three divs and go from there to check. Also reset styles are a MUST for IE, I use Eric Meyer's. (easy to Google).
Also, display: inline; on the one with margin will fix it for IE6 I suspect.