I'm fairly confident this is one of those things that has been discussed endlessly out there in the internet, but I can't find a solution.
I need to float 2 divs on the same line as a paragraph. Both of the divs have variable width and I need the paragraph to shrink into the available space and wrap its contents so that none of the elements themselves wrap off the line.
I've set up a JSFiddle
HTML here:
<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>
CSS here:
.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px}
p {margin:0; overflow:auto; display:inline-block}
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}
I know that I can use Javascript to achieve this, but I'd much rather find a pure CSS solution.
Thanks.
Floats do not shrink or expand to fit the available space. A floated item always uses the required space of any children.
That is what flexbox was invented for.
.flex-column-container {
flex: 1 auto 1;
}
Alternatively you could use a table layout.
Please check this fiddle if this is what you are looking for http://jsfiddle.net/Mohinder/dEwuU/
here is HTML
<div class="main">
<div class="w_200"></div>
<div class="middle"></div>
<div class="w_200"></div>
</div>
here is css
body,div{
margin:0px;
padding:0px;
}
.main {
width:100%;
text-align:center;
min-width:404px;
background:black;
float:left;
}
.w_200 {
width:200px;
background:red;
height:100px;
float:left;
}
.middle {
height:100px;
background:red;
float:left;
width: 49.2%;
width: -webkit-calc(100% - 404px);
width: -moz-calc(100% - 404px);
width: calc(100% - 404px);
margin:0px 2px;
}
Got it. If I change the paragraph to display:block instead of inline-block and change the order of the elements so that the paragraph is the last in the markup it works perfectly.
Related
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.
I have DIV with flexible width set e.g. min-width:800px and max-width:1400px. In this DIV, there are many boxes with fix width 200px and display:inline-block. So depending on parent DIV width, these boxes fill the entire space.
My problem is the blank space on the right side which is caused by variable width of the parent div. Sometimes this blank space is small and looks fine, but with different widths of the parent div, this blank space is almost 200px.
I don't know, if I described my problem in enough detail, I hope this picture will help to describe my actual situation:
And this is what I would like to have:
This auto-margin could be easily achieved by using TABLE. However, I don't know the exact number of columns, since it depends on user's screen resolution. So I can't use table and rather stick with CSS.
Anyone has an idea how to solve this ? Thank you in advance for your comments and answers.
EDIT: I don't need support of IE6. I would like to support IE7, but IE7 is optional as I know there are limitations so I will probably use fixed width of "div.wrapper" in IE7
EDIT2 I need to handle multiple rows of these boxes, so they don't exceed the "div.wrapper" box and wrap correctly in multiple lines of boxes, not just in one long line.
EDIT3 I don't know the number of "columns" as this is very variable depending on user's screen resolution. So on big screen there could be 7 boxes in one row, and on small screens there could be just 4 boxes in one row. So I need solution that doesn't set fixed number of boxes in one row. Instead, when the boxes don't fit in one row, they should just wrap to a next row.
This is as close as IE7-compatible CSS can get: http://jsfiddle.net/thirtydot/79mFr/
If this still isn't right, it's time to look at using JavaScript and hopefully also jQuery. If you define your requirements properly, it should be trivial to get this perfect with JavaScript.
HTML:
<div id="container">
<div></div>
<div></div>
..
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 800px;
max-width: 1400px
}
#container > div {
margin-top: 16px;
border: 1px dashed #f0f;
width: 200px;
height: 200px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
The extra span (.stretch) can be replaced with :after.
This still works in all the same browsers as the above solution. :after doesn't work in IE6/7, but they're using distribute-all-lines anyway, so it doesn't matter.
See: http://jsfiddle.net/thirtydot/79mFr/2/
There's a minor downside to :after: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.
Specifically, this doesn't work:
<div id="container">
<div></div>
<div></div>
</div>
And this does:
<div id="container">
<div></div>
<div></div></div>
You need to make .box inline-blocks, and justify text in .wrapper. .wraper:after is needed to justify the last line. Older IEs don't understand after, but in IE text-align-last:center will take care of the last line.
.wrapper{
text-align:justify;
max-width:1400px;
min-width:800px;
text-align-last:center;
}
.wrapper:after{
content:'';
display:inline-block;
width:100%;
height:0;
font-size:0;
line-height:0;
}
.box{
display:inline-block;
*display:inline;
vertical-align:top;
width:200px;
height:50px;
background:red;
}
Here's a jsfiddle.
You can float them and just apply a wrapper to the .box which will allow you to margin:auto; the .box relative to the floated wrapper.
CSS:
div.wrapper {
width:100%;
border:3px solid red;
}
div.clear {
clear:both;
}
div.box-wrapper {
float:left;
margin:10px 0;
height:100px;
width:20%;
}
div.box {
border:1px solid black;
width:80px;
height:100px;
margin:auto;
}
HTML:
<div class="wrapper">
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="clear"></div>
</div>
Demo: http://jsfiddle.net/2avwf/
I didn't make them 200px wide for the sake of the fiddle window. Just swap that width:80px out with the width you desire.
If you want to make this a dynamic solution, in which the number of boxes in a row will vary from user to user based off their screen size, etc., simply make 3 or 4 width-defining box-wrapper classes:
.box-wrapper-25 {
width:25%;
}
.box-wrapper-33 {
width:33%;
}
Then with JQuery you can easily detect the width of .wrapper and assign an override class to the box wrappers:
$('.box-wrapper').each(function(){
$(this).removeClass().addClass('box-wrapper box-wrapper-25'); // only need 4 per row
});
Something like this: http://jsfiddle.net/RcDky/
Try this jsFiddle: http://jsfiddle.net/MKuxm/
Just make the window larger and smaller to size the div, you'll see that the margin between the red boxes will size accordingly. I am aware that the red boxes are no longer 200px wide, but I'm afraid that isn't possible with pure css because you should not mix percentage widths and fixed pixel width.
HTML
<div>
<span>TEXT</span>
<span>TEXT</span>
<span>TEXT</span>
<span>TEXT</span>
</div>
CSS
div {
width: 95%;
}
span {
float: left;
background: red;
width: 20%;
margin-left: 2.5%;
margin-right: 2.5%;
}
I answered a similar question here
This is possible in pure css3 using media queries and the css calc() routine.
Of coarse this will only work on modern browsers. IE9+,Chrome,Firefox,
See this WORKING DEMO
The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).
On my project I have faced with the same problem and I came to the next decision - the best way for me is to go with js, in my case you can have xxx count of block inside container, if there is enough space in 1st row the block from 2nd row goes up to the 1st row, and so on.
here is an example http://jsfiddle.net/gVAjN/11/
$(function() {
// Call function when DOM is ready
settingsAlignment();
$(window).resize(function() {
// Call function on window resize
settingsAlignment();
})
$('#new_div').click(function() {
box_number = $('.element').size();
box_add = box_number + 1;
$('.container').append($('<div class="element">Box'+ box_add + '</div>'))
settingsAlignment();
})
function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
settingsLi = $('.element');
ul_width = settingsUl.outerWidth(true);
item_width = settingsLi.width();
min_gap = 7;
effective_item_width = item_width + min_gap;
items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
gaps_sum = ul_width - items_in_row * item_width;
new_gaps = gaps_sum / (items_in_row + 1);
item_margin = Math.floor(new_gaps);
row_width = (item_width + item_margin) * items_in_row - item_margin;
console.log(row_width + '= row_width');
console.log(ul_width + '= ul_width');
ul_left_padding = Math.ceil((ul_width - row_width) / 2);
console.log(ul_left_padding + '=ul_left_padding');
settingsUl.css('padding-left', ul_left_padding + 'px');
settingsLi.css('margin-right', item_margin + 'px');
console.log(settingsLi);
}
});
quite old but worth trying since multiple rows and text-align: justify; in the #container creates gaps when last row has less divs. I wanted everything to be floated left. So my idea was to use 2 wrappers.
<div class="wrapper">
<div class="wrapper2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
</div>
as well as overflow: hidden; in css
.wrapper {
width:620px;
border:3px solid red;
margin:0 auto; overflow:hidden;
}
.wrapper2 {
width:630px;
}
div.clear {
clear:both;
}
.box {
width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}
drawback: margins are not auto set...
DEMO: http://jsfiddle.net/hexagon13/2avwf/52/
Try this:
div.wrapper {
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
justify-content: space-between;
/* justify-content will give the auto margin you looking for
it will place the auto margin only between each div.box
make sure the div.wrapper has "display: flex;"
*/
}
div.box {
display: inline-flex; /* inline-flex will make the boxes all in the same line */
width: 200px; /* notice you don't need width to be a % for this to work */
height: 100%;
margin: auto; /* gives you the auto margin for the first and last box from the border of your wrapper */
}
Please see the image below. Assume that these are all divs with the given ids. Also, let's assume that they carry the same weight semantically so they should be at the same point in the html hierarchy:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
What is the proper CSS to position them correctly so as to appear as in the image below? The solution should flow properly as the browser is resized and preferably work on >=IE7.
Think of this as an action panel (#1) and 3 information displays (#2, #3, #4) so it is probably expected for 2,3,4 to expand in width to fill the browser window and flow below the action panel as the browser shrinks.
Use this
#id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }
demo at http://jsfiddle.net/gaby/wsEt6/
I altered your ids as they are not allowed to be numeric.
http://www.w3.org/TR/html4/types.html#h-6.2
EDIT: I just read the bottom piece, so my example is fixed (width)...
An id can't be a number, but to keep your example I'll use the numbers spelled out.
CSS:
.container { overflow:hidden; /* Clear Floats */ width:400px; }
#one, #two, #three, #four { float:left; }
#one { width:200px; }
#two { width:200px; }
#three { width:100px; }
#four { width:100px; }
Example: http://jsfiddle.net/DOSBeats/CqSTY/
I would suggest to use container divs for those. Something like this:
<div id="one" class="left"></div>
<div class="right">
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
Wrap #1, #2, #3, #4 in a container div, #0.5. Float the #1 div left and have a width of 50%. Wrap #1, #2, #3 in a container div named, #container - float that right with a width of 50%.
Do the same thing for the divs inside #container
check if this helps you out just remember to modify divs as you need it all in the div play with them according to the screen size you need :
http://jsfiddle.net/z747R/