Hi there I know that is a silly question but I couldn't find a solution for this case, my css skills are not good :(.
How can I achieve the layout below.
The text should wrap at the end of the container(div,span,whatever)
---- --------------------------
|URL:|thissdfsisalongurasdsdfrea|
----|allyyyyyyyyyyylonggggggggg|
|sdddfasdfsdfasdfsadfsdfsds|
|--------------------------|
http://jsfiddle.net/tmqCR/
A few of these responses have what you need. I think this has everything together though.
The HTML:
<div class="container">
<div class="url">
URL:
</div>
<div class="text">
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
</div>
<div class="clear"></div>
</div>
The CSS:
.url {
float:left;
width:60px;
}
.text {
float:left;
width:200px;
}
.clear {
clear:both;
}
Check out this fiddle http://jsfiddle.net/FEZaJ/
The URL - Float it left;
The media element. Really breaks down to float: left; on the first element and overflow hidden on the second.
Hi i m created this like one.
Css
.url {
float: left;
width: 75px;
background:pink;
}
.description{
float: left;
width: 175px;
word-wrap: break-word;
text-align:justify;
background:lightgreen;
}
HTML
<div class="url">URL:</div>
<div class="description">thissdfsisalongurasdsdfreaallyyyyyyyyyyylongggggggggsdddfasdfsdfasdfsadfsdfsds</div>
Live demo Click here http://jsfiddle.net/rohitazad/tmqCR/25/
Related
I have 3 blocks
<div>loremloremloremlorem</div>
<div>loremloremlorem</div>
<div>loremloremloremlorem</div>
How to set CSS to have aqual height ? I cant use row, because it's responsive design and I 1 row can be flexible count of items.
Use display:table and display:table-cell.
.container {
display:table;
}
.item {
display:table-cell;
width:100px;
border:2px solid black;
}
.item + .item {
border-left:none;
}
<div class="container">
<div class="item">test test test test</div>
<div class="item">test test test test test test test test test test test test</div>
<div class="item">test test test test test test test test</div>
</div>
You can also use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
div.container {
display:flex;
}
div.item {
border:1px solid #000;
display:block;
width:100px;
}
<div class="container">
<div class="item">lorem lorem lorem lorem lorem lorem</div>
<div class="item">lorem lorem lorem</div>
<div class="item">lorem lorem lorem lorem lorem lorem lorem</div>
</div>
If you can wrap them inside a container, you can set it display:table and assign display:table-cell to each inner DIV. In this way, blocks are treated as table cells and so, alla with equal height. Please look at this jsFiddle
CSS:
#wrapper
{
display:table;
}
#wrapper div
{
display:table-cell;
border:solid 1px red;
width:50px;
}
You can solve this, by using display: table in the container div, and use display: table-cell in children.
See my CodePen code:
http://codepen.io/michelgefuni/pen/YPeVxN
I have a div with a fixed width, which has a div with text inside. Parts of the text are in a span for coloring. The text div has all necessary styles for text-overflow with dots at the end (ellipsis), but the dots are not inheriting the span's color, because their definition is on the div. When I put the definition on the span, it ignores its parent's width.
Test code:
.container {
width: 120px;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.color {
color: #b02b7c;
}
<div class="container">
<div class="text">Lorem <span class="color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- works -->
<div>Lorem <span class="text color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- doesn't work -->
</div>
Is there any clean CSS way to solve this problem? I'd like to stick with text-overflow: ellipsis;, because the other solutions for text truncation are a bit messy in my opinion.
Referrent source at https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
If I understand your issue correctly, this might work for you:
.container {
width:120px;
background: lightgray;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color:#b02b7c;
}
.color {
color: black;
}
<div class="container">
<div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
</div><!-- works -->
</div>
Demo Fiddle
If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use .color to set the initial text black.
I have a list of simple HTML elements like divs, Paragraphs, etc. I'd like to display them in fixed height container, with the content shown in columns with same fixed width, all horizontally scrollable, just like it's shown on this picture.
The browser it should work in is IE11.
Any idea, how to implement it? Thanks.
Put them all in:
<div class="sample"></div> and wrap them in a <div class="container"></div>
Give all .sample classes and .container a fixed width and height.
.sample {
width: 900px;
height: 500px;
}
.container {
overflow-x: scroll;
overflow-y: hidden;
}
You could use css3 columns
http://www.w3schools.com/cssref/css3_pr_columns.asp
<div id="main">
Content here, no wrapping divs needed...
</div>
Or even better using html5
<main>
Content here, no wrapping divs needed...
</main>
You must put all the elements in a container, and give it a width large enough to not wrap the elements around. The elements should either float: left or display: inline-block.
Then put a div pane around, which shows a cutout of the container and give that pane overflow-x: auto in order to show a scrollbar when necessary
<div class="pane">
<div class="container">
<p class="column">Lorem ipsum dolor sit amet, ...</p>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<p class="column">Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
.pane {
width: 100%;
height: 380px;
overflow-x: auto;
}
.container {
width: 1250px;
max-height: 350px;
}
.container .column {
display: inline-block;
width: 300px;
}
See JSFiddle
I am trying to figure out, how to place two divs next to each other without specifying the width. It is not as easy as it seems:
the HTML:
<div id="container">
<div id="column1">Fixed Width</div>
<div id="column2">Auto Width</div>
</div>
the CSS:
#container {
float:left;
width:200px;
}
#column1 {
float:left;
width:24px;
background:gray;
}
#column2 {
float:left;
width:auto;
background:blue;
}
*the #container has 200px fixed width (could be XX%). #column1 has a fixed width of 24px, #column2 has the width set to auto.
This will work just fine and column2 will be next to column1, until the contents of column2 will reach the limit of 200-24 where, instead of a line break inside the div, column2 will jump below column1.
What I am trying to achieve (bulletproof) that column2 stays next to column1, inside container, no matter how big the content of column2 gets. Height is auto and does not matter.
(I am trying to create a message box, similar to Facebook, thumbnail on the left side, text next to it with unlimited height. I don't want the text from column2 to jump below or wrap around column1). May be very easy, could not figure it out. As always, any help would be highly appreciated! :)
If you remove float property from #column2 and set display: table; you will get desired effect.
HTML
<div id="container">
<div id="column1">Fix</div>
<div id="column2">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>
CSS
#container {
float:left;
width:200px;
}
#column1 {
float:left;
width:24px;
background:gray;
}
#column2 {
background:blue;
display: table;
}
DEMO
Try to remove or add more "Lorem Ipsum" text.
You can certaily do this:
#column2 {
/* float:left; removed */
width:auto;
background:blue;
}
As colum1 will force column2 to be by his side, when content be much larger than the left sapce ccolumn2 will just expand down.
If you don't wrap the DIVs in an other way, just try this:
<div style="width: 200px; border: 3px solid red; ">
<div style="width:24px; display: table-cell; border: 3px solid blue; ">
aaa
</div>
<div style="display: table-cell; border: 3px solid green;">
bbb bbb
</div>
</div>
http://jsfiddle.net/Zctjr/2/
Just set max-width to make it wrap instead of keep growing
I'm trying to get the footer in my site to look like this:
Wilgrove Baptist Church Home | About | Ministries 1234 S. Main st.
John G. Smith, Sr. Pastor Contact Us | Site Map somwhere, ID 55555
My problem is getting it laid out into the 3 columns. Any suggestions?
Thanks!
Quite easily done using floats:
<div id="footer">
<p class="left">Left aligned text here<br />Next line here</p>
<p class="right">Right aligned text here<br />Next line here</p>
<p class="centered">Center Text here<br />Next line here</p>
</div>
and the CSS:
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
Here are a list of three column CSS layouts. Alistapart.com also has an article on it.
I'd recommend reviewing the 'Three Column CSS layouts' list; each link goes into detail about what it looks like from a 'Newspaper Layout' standpoint, as well as the advantages and disadvantages of each. I used it for a three column layout for the site I'm maintaining.
<div id="footer">
<div>foo</div>
<div>bar</div>
<div>baz</div>
</div>
#footer { display: table; width: 100%; table-layout: fixed; }
#footer > div { display: table-cell; }
This won't work in IE 7 and prior, though. In that case I recommend serving them (through IE conditional comments) markup similar to alex, where you use simple floats. These won't center properly, but they'll certainly work, and as people upgrade to IE8 or a better browser they'll automatically upconvert to the display:table solution.
I used the following code on my own site.
HTML:
<footer>
<aside class="footer-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</aside>
<aside class="footer-right">
Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.
</aside>
<aside class="footer-center">
Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.
</aside>
</footer>
CSS:
footer [class ^= 'footer-'] {
width: 33.3333%;
display: inline-block;
text-align: center;
}
footer .footer-left {
float: left;
}
footer .footer-right {
float: right;
}
All content will be center-aligned because that's what I wanted. You can easily change this, though.
To have three columns of almost equal width:
HTML:
<div id="footer">
<p>First section, first line of text<br /> Second line of text</p>
<p>Second section, first line of text<br /> Second line of text</p>
<p>Third section, first line of text<br /> Second line of text</p>
</div>
CSS:
#footer > p:first-child {
float: left;
text-align: left;
width: 33.3%; }
#footer > p:nth-child(2) {
float: left;
text-align: center;
width: 33.4%; }
#footer > p:last-child {
float: right;
text-align: right;
width: 33.3%; }
Compared to Jayx's answer, I've simplified the markup and used different selectors in the stylesheet.
Read more about fractional percentage lengths.
Actually, the text-align code works other than the fact that you have the text angling toward the end. To fix this, simply apply a margin-top negative value to line up with the left text.
Take a look...
#left {
text-align:left;
}
#right {
text-align:right;
margin-top:-35px;
}
#center {
text-align:center;
margin-top:-35px;
}
Try this:
<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>
You can adjust the padding, etc. accordingly.