I have a 3-column layout.
All columns are defined as divs. And they are all implementing the same css:
.div-column {
display:inline-block;
vertical-align: top;
}
As long as the content of the columns is not too wide, they stay beside each other as expected. The last column however contains a div with some text. If this text gets too long, the whole column breaks out of line.
<div id=column3 class=div-column>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</div>
</div>
I expected the text to wrap if it does not fit in one line. What can I do to make sure the the length of that text does not matter? In other words: How can I make sure that the 3-column layout does not break?
Important: I MUST NOT work with fixed widths (width, min-width, max-width) for the columns!!!
Thanks so much for (hopefully simple) ideas!
If I am not wrong, you want all the three divs to exist at the same place and not to scroll down. For that you have to add a display:table-cell; to the div-column class.
Here is the Working Solution.
The HTML:
<div id=column3 class=div-column>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</div>
</div>
<div class=div-column>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</div>
</div>
<div class=div-column>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</div>
</div>
The CSS:
.div-column {
display:table-cell;
vertical-align: top;
}
Hope this Helps.
how about max-width? that still allows the div to be smaller but when it reaches the specified with it doesn't grow bigger.
max-width:250px;
The JsFiddle
Related
I would like to set the space between span lines to 15px but it doesn't work when i'm using line-height and i measuring the space with chrome extension the space it's not equal to 15px.
<div class="test">
<span style="line-height:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
result:
enter image description here
Is this what you were looking for. I have added a p element so CSS would recognize this block of text.
<div class="test">
<span>
<p style="line-height:25px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
</span>
</div>
Your code seems to be working. Remember that line-height doesn't affect the font-size but the effective spacing before and after the text (which is why the DOM viewer in chrome shows that the height hasn't changed).
Here is a snippet to highlight what is going on.
.test {
background-color: blue;
}
.test > span {
line-height: 125px;
color: white;
}
<div class="test">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
your code is working . you just probably are measure wrong.
<div class="test" style='width:50px'>
<span style="line-height:1; font-size:15px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
line-height will take values without units as a multiple of the font size.
it is the space each line takes .
Line boxes "belong" to the containing block element - in your case the .test element, and inline elements like your span are broken into multiple inline boxes across the line breaks and the parts are then fitted into the line boxes.
So on each line of the .test element, there's a zero-width inline box called a strut and a part of the span. The span has a line-height of 15px, but the strut has a line-height determined by the .test element.
Since you're not change the font family, or font sizes, or vertical alignments, the distance from the top of one line to the next is simply the maximum of the line height of the strut and the line height of the span.
The default font size, font-family, and line-heights will give a line height of the strut to be around 18 to 19 pixels, hence why you are seeing bigger gaps than you expect.
So to reduce the space between the lines, reduce the strut's line-height as well as the span's line-height, which you do by setting the line-height for the containing block. The span element can then just inherit it. i.e. Use:
body { width:200px; } /* for demo to make multiple lines */
.test {
line-height: 15px;
}
<div class="test">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
My code is this:
<div class="padding5">
<div id="div1" class="float_left wh50"></div>
<div id="div2" class="float_left h50">Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.</div>
<div id="div3" class="float_right wh50"></div>
<div id="div4" class="float_right wh50"></div>
<div class="clear"></div>
</div>
And my CSS is this:
<style>
.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{height:50px;}
.float_left{float:left;}
.float_right{float:right;}
</style>
Now if I resize my window (and make it smaller) I want the content from div id=2 to break words to a new row but is not. Is keep pushing the other elements behind.
Remove the height from the .wh50 class. Or set it to min-height: 50px;. The height declaration is causing div3 and div4 to appear like they're not being cleared.
.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{min-height:50px;}
.float_left{float:left;}
.float_right{float:right;}
i have paragraphs with text and a div what say something like "more" like this:
<div>
<p>
Lorem ipsum dolor sit ametm.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</p>
<div class="extra">more</div>
</div>
I need to place the extra div right behind the end of the last word in the paragraph, on the same line.
like this: this is the end of p - more
It seems to be easy to do this with a p:after selector but i cant use this because i need to work with the "extra" div in jquery.
And I need to have the paragraph using display or display-inline.
Do somebody has a tip?
thanks alot!
edit: I need to have the extra-div next to - not wrapped in - the p
thats is the problem
and i tried to use span and inside-block but without any luck
Try this:
<div>
<p>Lorem ipsum dolor sit ametm.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
<span class="extra">more</span>
</p>
</div>
Can you use display: inline-block on the div?
That lets the element have width, height (and other box properties like padding), but behave like a character in a paragraph when it comes to positioning.
Oh also, you probably have to place the div within the last paragraph since otherwise, the paragraph will push it down - the paragraph has its own box in the page.
i cant wrap the span inside the p because the p is coming from a wordpress loop.
at the end i used jquery to append the span at the end of the last p.
$(document).ready(function() {
$('.extra_available p:last-of-type').append(' <span class="extra"> extra </span>');
});
thanks alot!
I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).
Is there a way around this to still have the two columns of text centered?
Edit: Here is a link to what the code looks like: http://www.bootply.com/119539
Here try this Bootply. Is this what you are looking for?
<div class="row">
<div class="col-lg-12">
<h2 class="center-block">How We Work</h2>
</div>
<div class="col-lg-4 col-lg-offset-2">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
</div>
<div class="col-lg-4">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
h2.center-block{
text-align:center;
}
p.text-justify{
max-width:400px;
}
NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.
I have a problem. As you can see from the code, in div named "div1" I have 3 divs. I want first (yellow) div to be on top, third (yellow) to be on bottom, and the second div (pink) to fill the remaining space. The only fixed heights are the heights of yellow divs. Can you please help me, how to make the pink div fill the remaining space? Here is my code:
<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
<div id=div1 style="display: table-cell;background-color: #0f0;">
<div style="background-color:yellow;width:100%;height:20px;">s</div>
<div style="background-color:pink; width:100%;">
Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa
</div>
<div style="background-color:yellow;width:100%;height:20px;">s</div>
</div>
<div style="background-color: #f00;display: table-cell;width:250px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>
</div>
Having to post this as an answer in order to include the graphic. In Firefox and Chrome and IE, your page looks as I think you've described it:
Is this how it should appear?
With a little trickery this can be done:
Text in right cell is taller: http://jsfiddle.net/UQgXM/2/
Text in left cell is taller: http://jsfiddle.net/UQgXM/3/
I've separated the CSS from the HTML.
Major changes:
Given the table a height. This is needed to make the divs in the cell respond to the height setting. The table height is ignored. I set it to 1%, but the table want to be larger.
Given the pink div a height of 100% and a margin and padding to position the content right.
Given the yellow divs (especially the top one) a z-index of 1 and position: relative to make it respond to the z-index. Otherwise it would drop behind the pink div.
<div class="top">s</div>
<div class="middle">
Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa
</div>
<div class="bottom">s</div>
</div>
<div class="rightcell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>
And the CSS:
.table {
width:100%;
height: 1%;
background-color: lime;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
#div1 {
display: table-cell;
background-color: #0f0;
}
.top,
.bottom{
background-color:yellow;
width:100%;
height:20px;
z-index: 1;
position: relative;
}
.middle {
background-color:pink;
width:100%;
height: 100%;
margin: -20px 0;
position: relative;
padding: 20px 0;
}
.rightcell {
background-color: #f00;
display: table-cell;
width:250px;
}
With a little javascript, you can do some math and calculate the height the pink div should be.
var rightD = document.getElementById('rightDiv');
var yellowD = document.getElementById('yellowD');
var middleD = document.getElementById('middleDiv');
var height = rightD.clientHeight - (yellowD.clientHeight * 2);
middleD.style.height = height + 'px';
http://jsfiddle.net/kX4UB/1/
You don't need to declare so many variables, but I did just for easy display. I just set the height to the red div's height minus the yellow div's height x2. Note, this code should be placed in js tags after these divs in the doc.