Consider the following code:
HTML:
<div id="wrapper">
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
</div>
CSS:
#wrapper {
width: 300px;
border: 1px solid black;
overflow: auto;
}
.a {
width: 70px;
height: 70px;
border: 1px solid red;
float: left;
}
How could I force the horizontal scroll bar to appear rather than displaying the red div's in the second line ?
Try this:
#wrapper {
width: 300px;
border: 1px solid black;
overflow: auto;
white-space: nowrap;
}
.a {
width: 70px;
height: 70px;
border: 1px solid red;
display: inline-block;
}
It will give you spacing between the inner divs - put them all in one line to remove those.
Related
Is there a way I can make the blue div wrap text once it butts up against the yellow div instead of stacking on top of the yellow one? Is there a way I can use overflow or wordwrap? that will make this work?
blue div to wrap once it butts up against yellow div
.container {
width:100%;
border: px solid #d3d3d3;
}
.container div {}
.wrap1 {
display: table;
border: 1px solid green;
width: 100%;
}
.wrap2 {
display: table;
border: 1px solid red;
width: 100%;
}
.title {border: 1px solid blue;
display: table;
float: left;
}
.container .learn {
float: right;border: 1px solid yellow;
cursor: pointer;
display: table;
}
.container .content {
display: table;
display: none;
padding: 5px;
}
<div class="container">
<div class="wrap1">
<div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
<div class="learn">Learn More!</div>
</div>
<!--makes the content expand below this div-->
<div class="wrap2">
<div class="content">
<p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
</div>
</div>
<!--holds the content below the wrap one div-->
</div>
<!--container-->
Use flexbox!
Add display: flex; to your containers. This will wrap your text once it reaches the other div. I've included a snippet example that should work for you.
.container {
width:100%;
border: px solid #d3d3d3;
}
.container div {}
.wrap1 {
display: flex;
justify-content: space-between;
border: 1px solid green;
width: 100%;
}
.wrap2 {
display: table;
border: 1px solid red;
width: 100%;
}
.title {border: 1px solid blue;
display: table;
float: left;
}
.container .learn {
float: right;border: 1px solid yellow;
cursor: pointer;
display: table;
}
.container .content {
display: table;
display: none;
padding: 5px;
}
<div class="container">
<div class="wrap1">
<div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
<div class="learn">Learn More!</div>
</div>
<!--makes the content expand below this div-->
<div class="wrap2">
<div class="content">
<p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
</div>
</div>
<!--holds the content below the wrap one div-->
</div>
<!--container-->
You could put display: flex; onto the wrap1 class instead of display table and I believe this will get the effect you are wanting.
Set a percentage width on the div and then use word-wrap: break-word;
.container {
width:100%;
border: px solid #d3d3d3;
}
.container div {}
.wrap1 {
display: table;
border: 1px solid green;
width: 100%;
}
.wrap2 {
display: table;
border: 1px solid red;
width: 100%;
}
.title {border: 1px solid blue;
display: table;
float: left;
word-wrap: break-word;
width: 50%;
}
.container .learn {
float: right;border: 1px solid yellow;
cursor: pointer;
display: table;
}
.container .content {
display: table;
display: none;
padding: 5px;
}
<div class="container">
<div class="wrap1">
<div class="title">How do we shop our carriers to find yfkasjldkfjl;kjsdfl;kjsdfasdfasdfou the best price when we have so many?</div>
<div class="learn">Learn More!</div>
</div>
<!--makes the content expand below this div-->
<div class="wrap2">
<div class="content">
<p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
</div>
</div>
<!--holds the content below the wrap one div-->
</div>
<!--container-->
Flexbox can do that.
.container {
width: 60%; /* for demo */
margin:auto;
border: 1px solid #d3d3d3;
}
.container div {}
.wrap1 {
display: flex;
border: 1px solid green;
}
.title {
flex: 1;
border: 1px solid blue
}
.container .learn {
border: 1px solid yellow;
cursor: pointer;
}
<div class="container">
<div class="wrap1">
<div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
<div class="learn">Learn More!</div>
</div>
</div>
<!--container-->
If you want a really clean solution, I'd recommend using flex-box! Elements defined within the flex boxed container will have to share the given width amongst themselves based on their needs (how much content is within them).
I like adding a min-width to the small element so it doesn't get squashed.
.container {
width:100%;
border: 5px solid #d3d3d3;
}
.wrap1 {
border: 1px solid green;
width: 100%;
display: flex;
flex-direction: row;
}
.wrap2 {
border: 1px solid red;
width: 100%;
}
.title {
border: 1px solid blue;
}
.learn {
min-width: 25%;
border: 1px solid yellow;
cursor: pointer;
}
I would suggest staying away from floats as much as possible. It takes the element out of it's traditional flow and can cause other problems when styling.Another solution is to use display: inline-block - if child elements don't take up the full width of their parent's container, they will share the space. A bit wonky with 75%/24%, which is why I prefer flex-box.
.container {
width:100%;
border: 5px solid #d3d3d3;
box-sizing: content-block;
}
.wrap1 {
border: 1px solid green;
width: 100%;
}
.wrap2 {
border: 1px solid red;
width: 100%;
}
.title {
border: 1px solid blue;
max-width: 75%;
display: inline-block;
}
.learn {
display: inline-block;
width: 24%;
border: 1px solid yellow;
cursor: pointer;
}
I'm facing a css problem realted to inline-div.
When the text(or sentece) is long, the inline div pushes down as on the image below:
But, when I add a line break, It works perfectly.
How can I make it work without having to use <br>? The main content to be posted is dynamic and it also needs to be responsive.
Thanks
Please Note: This is a simplified version of my actual code. In the
actual code the width of the main container is 100%
HTML
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
CSS
body{
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv{
border: 10px solid brown;
display:inline-block;
width: 70px;
overflow:hidden;
vertical-align:top;
}
#secondDiv{
border: 10px solid skyblue;
float:left;
width: 70px;
}
#thirdDiv{
display:inline-block;
border: 5px solid yellowgreen;
vertical-align:top;
}
use : white-space: nowrap; for the div containing the long sentences.
You can use flexbox. Just add
#container {
display: flex;
}
body {
width: 350px;
margin: 0px auto;
}
#container {
display: flex;
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
vertical-align: top;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
vertical-align: top;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
.products
{
width: 100%;
height: 500px;
background: gray;
}
.box
{
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<div class="box">
<p>Ola</p>
</div>
</div>
I want the paragraph to appear inside a square. The code as it is shows that the 2 divs are together. And only the content inside the paragraph appears.
This image ilustrates the format I intend:
.products
{position:relative;
width: 100%;
height: 500px;
background: gray;
}
.box
{p
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<p>Ola</p>
</div>
<div class="box">
</div>
try this...
background-color: ;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
Have you tried
<p class="box">...</p>
removing the div wrapping your paragraph?
I have a parent div with variable width and height and overflow auto, then I have two or more children div with 100% with of parent.
I would like that all the children div have the same width, but when the parent has horizontal scroll, each children have different width.
See the example:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
height: 20px;
background: aqua;
display: inline-block;
white-space: nowrap;
border: 1px solid yellow;
width: 100%;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Try this
#container {
width: 175px;
background: red;
overflow: auto;
border-collapse:collapse;
}
.table {
width:100%;
display:table;
}
.block {
height: 20px;
background: aqua;
display: table-row;
white-space: nowrap;
border: 1px solid yellow;
}
<div id="container">
<div class="table">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
</div>
Please note that I changed display to table-row which automatically removes the border, but in order to preserve it I added border-collapse:collapse; to #container.
Edit: Added a div with a class "table" + relevant CSS
The solution is:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
background: none repeat scroll 0 0 aqua;
border: 1px solid yellow;
float: left;
height: 50px;
padding: 10px;
width: 175px;
word-break: break-all;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}