I need the text in these floating divs to be in one line. In Firefox this works ok. In IE6 it looks messed up:
screen
I cannot set an explicit width on these. Setting height does not help. Any ideas please?
The HTML:
<div id="wraper">
<div class="draggable">
<p>a main road with fast-travelling traffic</p>
</div>
<div class="draggable">
<p>a very large bird, not able to fly</p>
</div>
<div class="draggable">
<p>very important</p>
</div>
<div class="draggable">
<p>a plant with white berries that feeds on trees</p>
</div>
<div class="draggable">
<p>breakfast and lunch combined in one meal</p>
</div>
<div class="draggable">
<p>a part of a room used for cooking</p>
</div>
and the CSS:
#wraper{
background: #FAFAFA;
border: 1px solid #333;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 500px;
}
.draggable{
background: #F1F7FF;
border: 1px solid #CAE1FF;
display: inline;
float: left;
margin: 0 5px 5px 0;
padding: 3px;
position: relative;
width: auto;
height: auto;
}
.draggable p{
margin: 0;
padding: 0;
}
.draggable p {
white-space: nowrap;
}
You shouldn't need the explicit auto width/height, that's the default. You normally wouldn't use display: inline either as a float is never inline, but I guess this is a workaround for an IE bug?
Try adding white-space:nowrap; to the .draggable class.
If that fails, and you want a line break at a certain point, add clear:left; to the first instance of .draggable on each line.
BTW you could use inheritance, lose the .draggable class and div (BTW wraper = wrapper?) and just style the p tag:
#wrapper p { rules here }
Related
similar questions is asked several times but my question is more general!
FIRST:
for this first question I found an accurate answer here:
Display Inline-Block with Widths as Percent
assume that we have a <div> element in an html file and add a few styles to it;
notice that the width is 100% and it should place all over the screen width and shouldn't go out of the screen
(in this snippet the border of the element goes over the screen at the right side!):
body{
margin:0;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
<div id="section1">
hello
</div>
but, by the answer I found,
if I add box-sizing: border-box; to the css file, the view of the <div> element is going to be alright! and this is ok.
(run this snippeet to see the result):
#section1{
box-sizing: border-box;
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
<div id="section1">
hello
</div>
I didn't have any problems so far, that was only an introduction to understand my second question:
SECOND
the aforesaid words doesn't work if we have nested <div> elements!
I searched a lot but it wasn't effective for my example!
and this link is partly answered this question but not much effective!
this is the result that I want: here
this snippet is my sample that the two "hello" lines doesn't take place along eachother!:
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
what is the easiest way without changing the display property or adding negative margins?!
the problem comes from the white space next to the elements, which is produced automatically when you use display: inline-block;
a trick is to remove white spaces as you also have seen here.
if you don't want change the display property and don't remove indentation of your code (white spaces):
the easiest way is to add this properties:
box-sizing: border-box;
float: left;
more about box-sizing property
more about float property
body{
margin: 0;
}
*{
box-sizing: border-box;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
#section2{
display: inline-block;
width: 100%;
font-size: xx-large;
border: blue 3px solid;
}
.section2{
display:inline-block;
width:50%;
border: yellow 5px solid;
float: left;
}
<div id="section1">
hello
</div>
<br>
<br>
<br>
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div
><div id="section2-2" class="section2">hello</div>
</div>
it is working, but what did i do ? i simply tested with 40%, saw there was a space inbetween your two divs, so just deleted the space (actually a new line with some tabulations)
Inline-block element are white-space dependent and you could refer this answer to learn more about the difference between display as block, inline and inline-block. There are many ways to remove this white-spacing, from which one is adding font-size 0 to parent div which is here #section2 then manually you could assign font-size to their child element.
body{
margin: 0;
}
#section2{
font-size:0;
}
.section2{
font-size:18px;
box-sizing: border-box;
display:inline-block;
width:50%;
background: green;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
I am creating an HTML email signature and on small devices such as a phone, I can not keep it from wrapping when the screen resolution is not wide enough for the signature. I have tried a combination of everything I found here, either one or more of several suggestions on similar issues, but nothing seems to be working.
Here is the correct sig and two versions that are incorrect:
signature examples
Here is the code we currently have:
<div style="line-height:18px; margin:0px; padding: 0px 8px 8px 0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1e394e; display:inline-block; white-space: nowrap; overflow: hidden; min-width:500px;">
Sonnie Parker
Partner, Senior Administrator
334-482-4248 avnirvana.com
The signature will always wrap because the image container is set to float. This is good if you want your code to be responsive and display differently on smaller devices. If you want the two halves to always be side by side, I would specify their widths relative to their parent. Also, I'd recommend organizing your code with div tags.
.parent {
white-space: nowrap;
}
.parent>div {
display: inline-block;
}
.left {
width: 50%;
padding-right: 7px;
border-right: 2px solid #000000;
box-sizing: border-box;
}
.left img {
width: 100%;
}
.right {
width: 50%;
color: #1e394e;
padding-left: 7px;
box-sizing: border-box;
}
<div class="parent">
<div class="left">
<a href="avnirvana.com">
<img src="https://www.avnirvana.com/images/email_logo.png">
</a>
</div>
<div class="right">
<div>
<strong>Sonnie Parker</strong>
</div>
<div>
<em>Partner, Senior Administrator</em>
</div>
<div>
334-482-4248 avnirvana.com
</div>
</div>
</div>
I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}
Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/
I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>
Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.
I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}
The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.
I have the classic two divs side-by-side problem, which usually I have no problem with (float: left both divs and add a clear:both div after them).
My requirements are making this more complicated to solve...
I would like the left-hand div to occupy, as a column, the left hand side of the containing div (the left hand div will hold a number, ie '1.')
I would like the right-hand div to occupy the remaining space to the right of the left div - and most importantly I would like it NOT to drop below the left-hand div when there is insufficient 'space' for it to fit. Instead, I would like the right-hand div to remain in position and for the text within to WRAP, staying to the right of the left-hand div. Surely this is simple!
I do NOT want to set arbitrary width values because the length of the number in the left-hand div will vary, affecting the distance between the number and the right-hand text.
Here is some example html:
<div class="popup-container"> // set to width: 300px; in css
<div class="popup-text">
<div class="float-left">
<h3>2.<.h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to wrap around<.h3>
</div>
<div class="clear"></div>
</div>
</div>
And the css:
.popup-container {
width: 300px;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
OK, I think that's about it. If anyone knows how to have the left div operate as a column, against which the text in the right-hand div remains justified left (instead of dropping 'below' the left hand div), that would be swell.
EDIT
Thanks for all the answers. I should have mentioned (!!) it has to work in IE8. I know. But it really does. Big organisation, not updating its machines, unfortunately.
Flexbox and CSS Tables can both do that.
Support
Flexbox is IE10+
CSS Tables are IE8+
FLEXBOX
.popup-container {
width: 300px;
border:1px solid grey;
}
.popup-text {
display: flex;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.left {
flex: 0 0 auto;
background: #c0ffee;
}
.right {
flex:1;
background: yellow;
}
<div class="popup-container">
<div class="popup-text">
<div class="left">
<h3>2.</h3>
</div>
<div class="right">
<h3>Example text here, long enough to wrap around</h3>
</div>
</div>
</div>
CSS Tables
.popup-container {
width: 300px;
border:1px solid grey;
}
.popup-text {
display: table
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.left {
background: #c0ffee;
display: table-cell;
}
.right {
background: yellow;
display: table-cell;
}
<div class="popup-container">
<div class="popup-text">
<div class="left">
<h3>2.</h3>
</div>
<div class="right">
<h3>Example text here, long enough to wrap around</h3>
</div>
</div>
</div>
Use display:flex;
.popup-container {
width: 300px;
}
.popup-container .popup-text {
display: flex;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
<div class="popup-container">
<!-- set to width: 300px; in css -->
<div class="popup-text">
<div class="float-left">
<h3>2.</h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to scroll</h3>
</div>
<div class="clear"></div>
</div>
</div>
Here is a solution using display: flex
.popup-container {
width: 300px;
background-color: coral;
}
.popup-text {
display: flex;
}
.popup-text div.two {
flex: 1;
background-color: cornflowerblue;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
<div class="popup-container">
<!-- set to width: 300px; in css -->
<div class="popup-text">
<div class="one">
<h3>2.</h3>
</div>
<div class="two">
<h3>Example text here, long enough to scroll</h3>
</div>
</div>
</div>
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />