Some experimentation with the text-overflow property.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <body> <div style=”border: 1px solid red; max-width: 400px; overflow:hidden; text-overflow: ellipsis;”> <nobr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac libero nec est luctus aliquam. Nulla sodales, dolor a consectetur volutpat, elit mi convallis sem, at ornare ligula odio non metus. </nobr> </div> </body> </html>
A little CSS pattern to demonstrate what to do when you want one column to stay at a fixed width and the other column to stretch horizontally with the window. Thanks to my friend CSS guru Joe Silvashy for this one.
What I want it a column on my right side to be a fixed width, and the column on the left to stretch with the window gracefully (in web terms this is called a “liquid” layout).
Given right-hand-column (in our example, a div tag with a class right-hand-column) has a fixed dimension (in our case), how do I get left-hand-column to take up the remaining amount of width within outter_div by letting the text wrap (instead of keeping it all on a single line).
On the left, I have a bunch of words. I want the words to linebreak when the left column isn’t wide enough to fit all the words on one line. My right-hand column is an image – a pic I ripped from whitehouse.gov – with a fixed height & width. So I want this column to always be the same width, and the left column to adjust based on the size of the browser window.
Here’s a beginners approach – and it doesn’t work. The approach is float right div to the right, left div to the left. Give right div a fixed with an left div no width at all.
As we’ll see in a minute, this is wrong and doesn’t work the way we want it to.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″> <title>css_correct_width</title> <style type=”text/css” media=”screen”> div { margin: 4px; }
<div class=”left-hand-column”> <br />lorem ipsum dor amit. js oq xpqsqis aslsaldhq sdasasd. </div> </div> </body> </html>
When there’s a wide window, right column takes up the width we assigned and left column takes up how ever much space it needs to fix the inline content on one line.
When there’s a narrow window, right column takes up the width we assigned and left still takes up how ever much space it needs keep that content, and drops the whole div down.
But this isn’t what I wanted. What I want is for my left column to always take up the remaining space after you subtract how much my right div (the image) needs. And while we’re at it, wrap the text so that it flows onto multiple lines.
Joe’s solution. (He included reset CSS, which I’ve removed [forgive me] for purposes of this demonstration. In your CSS, you must never forget the reset CSS.)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″> <title>css_correct_width</title> <style type=”text/css” media=”screen”>
/* position absolute _inside_ a position relative allows for absolute positioning within an element and not the entire page */
position:absolute; top:0; right:0; }
.left-hand-column { border: solid purple; margin:0 320px 0 0; /* remember, top right bottom left */ } </style> </head> <body>
<div id=”outter_div”>
<div class=”right-hand-column”></div>
<div class=”left-hand-column”> <br />lorem ipsum dor amit. js oq xpqsqis aslsaldhq sdasasd. </div>
</div>
</body> </html>
What he’s done is to set the right column with absolute position to the right (top: 0; right: 0) and the left column with a right-hand margin of 320px (the width of the right column). This pushes it past the set width of the image on the right.
Note that the left column (the green one) now stretches to fill the remaining space in the window, whereas before it stayed at the width that was necessary to fit the text into the div (you can tell this because I put green border on it in all the examples).
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.