Please see see code http://jsbin.com/eveqe3/edit, also quoted below.
I need to show text inside the item divs in such a way the text appear only in the green box with specified width rest of the line need to be hidden. Any suggestions please...
<style>
#container{
width : 220px;
}
.item{
float:left;
border: 1px solid #0a0;
width: 100px;
height: 12px;
padding 2px;
margin: 0px 2px;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div class="item"> A very loooooooooooooooooooooong text </div>
<div class="item"> Another looooooooooooooooooooong text </div>
<div class="clearfix"> </div>
</div>
</body>
</html>
Additionally to overflow:hidden, use
white-space:nowrap;
Just use:
overflow: hidden;
white-space: nowrap;
In your item's divs
Use the css property overflow . For example:
.item{
width : 100px;
overflow:hidden;
}
The overflow property can have one of many values like ( hidden , scroll , visible ) .. you can als control the overflow in one direction only using overflow-x or overflow-y.
I hope this helps.
Related
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
This code:
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
Is coded with this css:
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
bottom:0;
}
And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?
Thanks
Elements are floated left making document flow modified. Document flow needs to be reset right before writing footer. It can be done by setting property clear:both for the footer (in fact just after .columns are finished).
A working jsfiddle is here.
CSS:
footer{
clear: both;
}
Suggestion (outside scope of question):
You should change id="columns" to class="columns" as in valid html markup, id's should be unique. (thanks michael)
try this
demo
css
*{
margin:0;
padding:0;
}
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
background-color:red;
}
.clearfix{
clear:both;
}
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
border:1px solid red;
}
html
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div class="clearfix"></div>
<footer>footer</footer>
When using any floated items, the default behavior is for them not to count towards other content in that area, so they'd appear to one side of other content.
Of course, if you want to prevent that, the clear property will essentially continue below any floated items on one (or either) side before it.
footer {
height: 50px;
clear: both; /* can also use `clear: left` here */
}
try after removeing bottom:0; and put below html code after third column
<div id='footer'>
<p>Footer Content</p>
</div>
You need to use the css clear for your problem
like clear :both for id/class of you div
text
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div style="clear:both"></div>
<footer>footer</footer>
HTML
<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>
<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>
CSS
.size {
background-color: red;
height: 100px;
width: 100px;
}
#size2 {
width: 200px;
}
.cont {
padding: 10px;
float: left;
}
I need div.cont's widths to be the width of their contained div.size (in my actual example div.size is an image and its with will vary in each instance).
This isnt happening as div.text takes up more space than its container, how can I stop this and make the text wrap?
JS Fiddle
Deleted all the previous stuff as I have (after doing some digging) found an exact duplicate with working solution.
My answer was also incorrect (as the op then specified the image MUST be allowed to be variable)
The answer is found on this jsfiddle and is an exact duplicate of css - shrink a parent div to fit one child's width and constrain the width of the other child
//html
<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>
//css
#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}
and basically it works using display:table-* (have a good read up)
'.size{ float:left;}'
let me know if this helps.
Expanding on Paul Sullivan's approach,
in your css:
.size {
...
display:block; /*assuming its an image - making sure its block level*/
...
}
.cont {
...
position:relative; /*add this to parent container if comming from cms*/
...
}
.text {
...
position:absolute;
top:100%; /*just to make sure content doesnt overlaps image*/
...
}
Just gives a plus point for getting content to stretch as wide as the image (plus padding)
Hope it helps,
Fiddle: http://jsfiddle.net/BKRsT/3/
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is it possible to make a nested structure of divs
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
to look like divs with fixed width that float left?
<style>
div {
float: left;
width: 200px;
}
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
I guess you can't do it with CSS. It's a language for defining the style of elements, not for modifying their structure. You could think about jQuery or XSLT for your case.
you can use margin-top property to get this effect
<div style="width:100px;height:100px;border:1px solid black">
<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?
</div?
Actually you don't need to do anything really, this is the default behavior for block level elements.
Try to create a blank html page and insert the lines
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
Without any form of styling the output will be:
Content1
Content2
Content3
Which is what you are asking for
I guess I figured how to do that with a bit of additional html and absolute positioning:
<div id="parent">
<div class="nest">
<div class="content">One</div>
<div class="nest">
<div class="content">Two</div>
<div class="nest">
<div class="content">Three</div>
</div>
</div>
</div>
</div>
//css:
#parent {
position: relative;
}
div.nest {
position:absolute;
width: 200px;
top: 0;
left: 200px; /*should be same as width */
/* the next is the tricky part */
margin: 0px;
padding: 0px;
border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
border: 1px solid #ccc;
padding: 8px;
margin: 4px;
}
Color me noobish, but couldn't you achieve something similar with an unordered list, since you're looking to nest elements? (http://jsfiddle.net/xDJAY/) Not sure if this is the structure you're looking for though.