I have a container div called main and then two divs floated left. The problem is that I need the main div background color visible (I supposed that the blue color background should be visible on the right side (300px which remains) and at the 4th row of the medium div as it is lower div than the left div). I also need both left and medium divs to automatically increase their heights on words wrapping and as you can see it does not work in the grey (middle) div.
See the http://jsfiddle.net/djqfo3we/2/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
You have to clear the floats otherwise the margins of the parent collapse and it appears that the parent has no height.
There are various techniques for clearing floats and you can find out more with a simple search
As for the text wrapping, as you have discovered long text strings won't break by themselves.
You can force a word break using word-wrap:break-word and leave your original text unchanged.
.main {
width: 500px;
background-color: blue;
overflow: hidden; /* quick clearfix */
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
Add a div inside the main div but at the bottom called clear:
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
Then give the class clear a style:
.clear {
clear: both;
}
and you get this: http://jsfiddle.net/djqfo3we/4/
EDIT:
As others have pointed out, in order to apply a wrap so that they stay within the set width dimensions, add the style word-wrap: break-word; to the content you want to have wrapped.
I've applied the word-wrap to both the middle and left div within the main div.
updated jsfiddle: http://jsfiddle.net/djqfo3we/10/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
.clear {
clear: both;
}
.middle, .left {
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
Related
I have got a horizontal line of divs that I would like to keep together, and there is a floating element to the right. When the float overlaps the line of divs, at the moment it breaks the divs into two lines. What I would like to happen would be for the line of divs to move below the float, similar to how the word "Heading" moves to below the float when there is not enough space.
I have tried white-space: no-wrap, but this does not cause the div to move vertically, it only places it behind the float. I have also tried clear: right, but this moves it down even when the boxes would fit further up.
Example (resizable box):
h2 {
margin: 0;
}
.outer {
border: solid;
resize: horizontal;
overflow-x: auto;
padding-bottom: 20px;
}
.right {
float: right;
width: 100px;
height: 50px;
background: red;
}
.pair {
/* white-space: nowrap; */
}
.pair > * {
display: inline-block;
padding: 2px;
margin: 0 2px;
background: lightGreen;
}
<div class="outer">
<div class="right"></div>
<h2>A Heading</h2>
<div class="pair">
<div>This is a box</div>
<div>This is a wide box</div>
</div>
</div>
You should make the pair element to be inline-block because by default a block element will get overlapped by a floated element unlike inline level element that will wrap around floated element.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.ref
h2 {
margin: 0;
}
.outer {
border: solid;
resize: horizontal;
overflow-x: auto;
padding-bottom: 20px;
}
.right {
float: right;
width: 100px;
height: 50px;
background: red;
}
.pair {
/*white-space: nowrap; not needed*/
display:inline-block;
}
.pair > * {
display: inline-block;
margin: 0 2px;
padding: 2px;
background: lightGreen;
}
<div class="outer">
<div class="right"></div>
<h2>A Heading</h2>
<div class="pair">
<div>This is a box</div>
<div>This is a wide box</div>
</div>
</div>
I have two DIV's, first DIV is an icon, second one is a long text, both floated left:
<div class="container">
<div class="icon"></div>
<div class="text"></div>
</div>
CSS
.container
{
border: 1px solid gray;
}
.icon
{
float: left;
width: 25px;
height: 25px;
}
.text
{
float: left;
}
The problem is when I resize the browsers width to minimum, the icon stays on the first line and the text gets divided into 2nd, 3rd, 4th etc.. lines. I want at least some of the text stay on the first line, in other words, I want the text to wrap around the icon if there's no more space left. How can I accomplish this? Thanks!
Simply removing the "text" element would do the task.
<div class="container">
<div class="icon"></div>
Text that you want to be wrapped can be written here
</div>
Apply the remaining width using calc for the .text element like below.
.text
{
float:left;
width:calc(100% - 30px);
}
.container
{
border: 1px solid gray;
}
.icon
{
float: left;
width: 25px;
height: 25px;
border:1px solid #ff00ff;
}
.text
{
float:left;
width:calc(100% - 30px);
}
<div class="container">
<div class="icon"></div>
<div class="text">This is some text showing how it is woring for a loooooooooong text.</div>
</div>
You only change next element to display block and no float
.text {
display: block;
}
you can add more margin of .icon
.icon
{
float: left;
width: 25px;
height: 25px;
margin:0 10px 10px 0;
}
I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?
Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>
JSFiddle
You can add css float:left to div and If you also don't want any text in div you should add css height to div.
.horizon div{
float: left;
height: 20px;
}
like this http://jsfiddle.net/KG5B3/
Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle
.horizon div{
float: left;
}
Fiddle
You can float those inner DIVs. You can also use inline-block (not shown).
<div class="horizon">
<div class="left">left</div>
<div class="mid">middle</div>
<div class="right">right</div>
<br style="clear: both" />
</div>
body {
margin: 0;
}
.horizon {
background: #000000;
width: 100%;
}
div.horizon div {
float: left;
}
.right {
width: 25%;
background: #ff0000;
}
.mid {
width: 50%;
background: #00ff00;
}
.left {
width: 25%;
background: #0000ff;
}
Given the following
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
(See: http://jsfiddle.net/ericjohannsen/JCPEH/1/)
Why does container apparently not have any area (that is, it has a zero height, plus the border)? I naively expected it to be as tall as the child divs that it contains.
What is the proper way to set this up so that the div containing the two children is as tall as the children?
You need to clear your floats. You can do this via a clearfix class:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
or a clearing element:
.clear {
clear:both;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
Updated Fiddle:
http://jsfiddle.net/JCPEH/5/
This is because floats are not part of the layout until they are cleared.
A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.
You can enlighten yourself here
before closing the big div add a <div id="clear"></div> and in css add #clear{clear:both;}
Set the position to absolute for the container, that fixes the problem. http://jsbin.com/ifojug/1/ jsfiddle doesnt work on my browser for some reason
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>