I have a few div’s, I’ve arranged them in 3 columns with this code:
display: inline-block; width: 33%;
Every div has a button. If you click on the button a hidden paragraph inside the div is shown. For this I’ve used the .toggle() function (jquery) with this css-code:
p {
display: none;
width: 100%;
height: 4em;
overflow-y: scroll;
overflow-x: none;
border: 1px solid black;
}
My problem is: when I click the button and the paragraph of the div is shown, the position of the other div's also changes (they all move down, really messing up the lay-out).
What I want is: the paragraph should only push down the div's in the same column. The position of the div's in the other 2 columns should stay the same.
Can anybody help me with that?
I think you need something like that.
You should surround your 3 paragraph div with an other to not mess up the layout.
<div>
<div class="paragraph" id="paragraph1">
<p>
1Lorem ipsum dolor sit amet,
</p>
</div>
<div class="paragraph" id="paragraph2">
<p>
2Lorem ipsum dolor sit amet,
</p>
</div>
<div class="paragraph" id="paragraph3">
<p>
3Lorem ipsum dolor sit amet,
</p>
</div>
</div>
Related
I have some block of text like this:
<div>
<span class="part-1">Some text.</span>
<span class="part-2">Some text.</span>
</div>
Parent div element has fluid width. How to make two span elements to remain in one line if container is wide enough, to wrap them if there is not enough space, but to avoid wrapping inside span elements?
In other words, .part-2 should be either in line with .part-1 or below it, but always whole.
EDIT: Important part is that .part-2 should not overflow the container, which happens if white-space: no-wrap is used.
<style>
.unbreakable{
white-space: nowrap;
}
#container{
overflow:hidden;
}
</style>
<div id="container">
<span class="part-1 unbreakable">Some text.</span>
<span class="part-2 unbreakable">Some text.</span>
</div>
Using the white-space css property, you can define how wrapping can occur inside elements. Using nowrap will prevent any wrapping on spaces.
EDIT: Added overflow hidden so the text doesn't go out. You could use scroll to add scrollbars.
Flexbox maybe but you're still getting overflow.
Hmmm...
div {
margin: 40px auto;
display: flex;
}
.flex-title {
display: flex;
flex-wrap: wrap;
}
.flex-title > span {
white-space: nowrap;
padding: 0 1em;
border: 1px solid grey;
}
<div class="flex-title">
<span class="part-1">Lorem ipsum dolor sit amet.</span>
<span class="part-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, enim!</span>
</div>
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
Here is an example.
The link for the div class="learn" is 1014px wide. While the button is only 215px wide.
What did I do wrong?
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
}
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn"></div>
<!-- PROBLEM HERE -->
</div>
</div>
The div with learn class is having a block display so browser will adjust the outer <a> as as display block and occupy the available width.
Change div display as inline-block then you can see the width of <a> coming as 215px
here is the example code
<html>
<style>
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: inline-block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
border:solid 1px ;
}
</style>
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn">wwww</div>fddfg
<!-- PROBLEM HERE -->
</div>
</div>
</html>
In HTML4, your markup is not Valid: DIV elements MUST NOT be descendent elements of A elements there. Only in HTML5 this is Valid. You should not rely on HTML5 being supported by a layout engine at this point.
div elements are block-level elements (per user agent stylesheet, their default is display: block); barring further CSS declarations, they are as wide as their containing block.
The containing block here is provided by the ancestor div element that has the CSS class inside specified (class="inside"). There is a CSS rule for elements with that class – .inside – in your stylesheet that says that those elements should have width: 1014px. So the descendent div element is displayed as wide as the ancestor div element, 1014px.
a elements are inline-level elements (per user agent stylesheet, their default is display: inline); barring further declarations, they have the combined dimensions of their content. The sole content of this a element is said div element. Therefore, the parent a element – the link – is as wide as the child div element (that does not really belong there).
The background-image of an element does not automatically stretch to the dimensions of the element's box, which is probably causing your confusion about the “button” represented by that background image.
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