I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
Related
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
I'm working on a site which displays a very large data set to the user which they can scroll across horizontally. I'm having some trouble with the behaviour of div widths when implementing this.
Essentially I need an outer div with a horizontal scroll and all the data displayed inside this. I have the following simple code to do this:
<div id="outer" style="height:100px;overflow:auto">
<div id="inner" style="border: 1px solid green;padding:3px;">
<div id="details" style="background-color:red;width: 300%">Test</div>
</div>
</div>
My problem is that the border defined on the "inner" div does not expand around the "details" div giving the result seen in this image: http://img849.imageshack.us/img849/1719/capturepw.png
Any simple solution to this with HTML and CSS?
Update: The "width: 300%" on details is simply to simulate the large dataset. There is no way of knowing how wide this dataset will be beforehand.
Take the width off the details div and add it the inner div
http://jsfiddle.net/jasongennaro/n88tT/
Change the width on inner for 100%, 300px, basically anything but a percentage over 100. Going with 300% will make the element 3 times the width of its parent, but won't influence it.
Edit:
Putting a 300% width won't yield the same reaction from your layout as containing lots of dummy content. Try putting some dummy content in the details element and remove the width. You'll have a more realistic result.
I really hope that you can help me.
I created this fiddle to show what I'm trying to do.
My question is: How do I stretch two div-elements to fill available horizontal space?
As you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.
There are three div-elements with a width of 50px.
The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.
My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.
I'm trying not to use tables, etc.
Let me know if there is something unclear.
EDIT:
I'd like to hear your comments about this way.
One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:
http://jsfiddle.net/GyxWm/
I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.
You can do it with help of javascript. Change div tags like this:
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>
And add this javascript somehwere after those tags:
var elem1 = document.getElementById("part1");
elem1.style.width = (screen.width - 150)/2;
var elem2 = document.getElementById("part2");
elem2.style.width = (screen.width - 150)/2;
And remove width:50%; from sectionFillUp in css
Afraid I dont think you can.
The float:left; removes your code from the containing div and all the elements end up next to each other, once an element leaves the screen to the right, it wraps underneath leaving a space (a bit like relative positioning does).
Also, you are attempting to compare a fixed width with a variable width, which is close to impossible.
If you take a look here: http://jsfiddle.net/P5Kjh/5/
First I reduced your code back to 2 divs and got that working.
I've added overflow:hidden to the backgroundG class to make sure there is a grey background and floated both divs left.
Then I set the widths, the cumulative total has to be around 100%, if you add a border to each element you need to work to a smaller percentage.
Then I added back the other 3 in a new backgroundG element and created a separte class for the fillup element so it would be 80% (without a border).
Probably doesnt help you a lot. sorry if not.
Cheers