I am having trouble getting the text on the right side of the box to wrap into two lines when the screen width is too narrow to show all of the text on one line. Instead, the entire right side bumps down below the left.
How do I get this to just wrap to two lines? Here's the fiddle
.box {
height: 80px;
clear: both;
}
.left {
width: 90px;
float: left;
margin-right: 8px;
height: 80px;
border: 1px solid #ccc;
}
.right {
float: left;
}
All you have to do on the .right is add a width maybe of like 40% or so and it should just text wrap as the pages gets smaller.
.right {
float: left;
width: 40%;
}
As pointed out in comments by haxxxton, removing the float from .right will result in the desired behaviour. Floated elements will break line if there is no space.
Related
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
I have an assignment where I have to create a website that looks like:
example site
I have created this so far:
I cant remove the white space in between the two divs. I use float:left and float: right
this is the CSS code:
#Vsebina {
width:auto;
position: relative;
left: 200px;
top: -22px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh, #Tretji.Dno, #Cetrti.Dno, #Peti.Dno, #Sesti.Dno {
width: 400px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh {
border: 2px;
border-style: dashed;
border-color: red;
max-height: 200px;
}
#Vsebina #Prvi.Vrh p, #Drugi.Vrh p{
height: 140px;
overflow-y: scroll;
}
#Vsebina #Drugi.Vrh, #Cetrti.Dno, #Sesti.Dno {
float: right;
}
#Vsebina #Prvi.Vrh, #Tretji.Dno, #Peti.Dno {
float:left;
}
The HTML is normal layout, I haven't done any styling in HTML, only the content is there. The file is also too wide, so it makes it vertically scrollable, which is something I want to also get rid off. Thanks.
Float left pulls the content to the left of its parent div and float right pulls the content to the right of its parent div.
Seeing by the css code you just need to apply float left. Remove float right to get the desired result.
-Thanks
I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.
Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?
Here is the JFiddle: http://jsfiddle.net/SFDPe/2/
Thanks!
You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.
JSfiddle here.
.preview {
width: 300px;
border: 1px solid red;
vertical-align: top;
height: auto;
overflow: auto;
}
.title {
width: 50%;
background-color: olive;
float: right;
}
.tileImage {
width: 50%;
background-color: orange;
float: left;
}
Instead of using display:inline-block use, float:left for both divs.
http://jsfiddle.net/SFDPe/3/
Take a look onto this article:
Fighting the Space Between Inline Block Elements
Maybe you can use float: left; instead? Like this:
.preview, .preview div {
float: left;
}
Take a look at this fiddle that I found, and resize the result window: http://jsfiddle.net/qPHgR/286/
Here's the css from the fiddle:
.left {
float: left;
}
.right {
background-color: #DDD;
overflow: hidden;
}
I want to achieve the same thing, but I want the right div to have a fixed width (300px) and the left div to expand/contract when the window is resized. I can not figure out how to fix it without changing the HTML order of left and right div in the code. I've experimentet with floats and other attirbutes but can't make it work.
Thanks for your help!
.container {
position: relative;
}
.left {
background-color: #DDD;
margin-right: 300px;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 300px;
}
How about this:
http://jsfiddle.net/7DKX8/2
.left {
float: left;
background-color: #DDD; }
.right {
width: 300px;
overflow: hidden; }
Updated jsFiddle
The floats are important for keeping the two elements next to each other. I added 310 pixels of margin to the right of the left DIV (300 pixels for the right DIV, and 10 pixels as white space). I then used a negative margin-left to pull the right DIV over on top of that margin.
I also added overflow: hidden; on DIV.container to illustrate a simple float containment solution. This can be removed if unnecessary, but you may find it makes the remainder of your layout styling easier.
Is this sort of what you want? http://jsfiddle.net/3ZUas/
The text interferes, but is this what you were going for?
Main thing is float: right;
Check this:
HTML:
<div class="container">
<div class="left">
some text goes here which is just here to change
</div>
<div class="right">
some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right
</div>
</div>
CSS:
.left {
float: left;
margin-right: 300px;
border: 1px solid #000;
}
.right {
position: absolute;
right: 0;
width: 300px;
background-color: #DDD;
overflow: hidden;
}
Hope this works for you...!
How do i keep two elements in the same row with fixed right column?
I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..
Example: http://jsfiddle.net/Jbbxk/2/
Is there any pure CSS solutions?
NB! Wrap div must have dynamic width!
For demostration purposes it has fixed witdh, so it will wrap.
Cheers!
This is one common way of doing what you want:
.wrap {
position: relative;
margin: 5px;
border: 1px solid red;
}
.left {
float: left;
background-color: #CCC;
margin-right: 48px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: #888;
}
Explanation:
The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
The wrap div is assigned position: relative so the right column position is determined according to it.
It's actually easier than I thought, just remove the float:left; from the left class and put your right floating items above them in the HTML
update fiddle
Here is another solution. Set display: table-cell;
http://jsfiddle.net/Jbbxk/54/
.left {
/*display: left;*/
display: table-cell;
}
.right {
float: right;
display: table-cell;
}
Also, the floating div comes first:
<div class="right">
</div>
<div class="left">
Looooooooong content - pushes right to next row<br>
NOT OK
</div>
You can do
.left {
max-width: 152px;
}
as you have dynamics width, use % like
.left {
float: left;
background-color: #CCC;
width:75%;
}
I have updated the fiddle link : http://jsfiddle.net/Jbbxk/6/