When i enter text in my div he goes under the picture. If i enter just couple of words DIV floats next to picture. Where is the problem?
.container {
width: 250px;
display: block;
overflow: auto;
}
.container img {
float: left;
}
.inside {
float: left;
}
<div class="container">
<img src="lib/images/asd-261269281.jpg" width="92" height="92">
<div class="inside">text text text text text text text text text text text text </div>
</div>
This will help you..:D
.container {
width: 250px;
display: block;
overflow: auto;
}
.container img {
float: left;
}
.inside {
float: left;
max-width:138px;
}
<div class="container">
<img src="lib/images/asd-261269281.jpg" width="92" height="92">
<div class="inside">text text text text text text text text text text text text </div>
</div>
Put your image as a background. That way you can fill it with text.
Like so:
<div class="container">text text text text</div>
Jsfiddle
This is happening because your text is overflowing the bounds of the defined box when you add more text so it is moved to below the image. There are a couple of different options that you have available here. You can set the width of the inside class so that it will wrap the text instead.
.inside {
float: left;
width: 55%; // Defines the max width of the box before it can wrap vertically.
}
A second method you can use is to set the display type of the .inside class to inline-block:
.inside {
display: inline-block;
width: 55%;
}
Related
I have a code like this: https://jsfiddle.net/qchtngzf/1/
and now, when the browser is too narrow, the div.right (the text on the right) jumps onto a next line. I would like to, however, if the div.left (the text on the left) would get smaller and the text inside would break onto a next line and the div.right would stay in the same place instead.
I found a similar issue here: Making a div float left, but not "fall" if text is too long
but it's a little different and doesn't work for me even with some changes I tried.
Thank you.
You should set width for both of them right and left class:
html, body, header, nav, footer, div, p, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
font-size: 18px;
}
.left {
width: 80%;
float: left;
position: relative;
}
.right {
width: 10%;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
hr {
border: 0;
height: 1px;
background-color: #e9e9e9;
margin: 16px 0;
}
section.body {
max-width: 960px;
min-width: 272px;
}
div.left {
color: #1e344c;
float: left;
}
div.left span {
font-size: 14px;
color: #666666;
}
div.right {
float: right;
}
<section class="body">
<div class="item clearfix">
<div class="left">
text text text text text text text text text text text text text text
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text text <br>
<span>text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text <br>
<span>text text text text text text text text text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text <br>
<span>text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text <br>
<span>text text text text text text </span>
</div>
<div class="right">text </div>
</div>
</section>
You can use below css if you want right section not to wrap in next line and left section to get shorter.
html, body, header, nav, footer, div, p, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
font-size: 18px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
hr {
border: 0;
height: 1px;
background-color: #e9e9e9;
margin: 16px 0;
}
section.body {
max-width: 960px;
min-width: 272px;
}
div.left {
color: #1e344c;
width
}
.item {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
div.left span {
font-size: 14px;
color: #666666;
}
div.right {
white-space:nowrap;
}
1) Set width for both divs
2)set font size in "vh"
3) No need to set position:relative; of div.left;
div.left{
width:90%;
font-size:2vh;
float:left;
}
div.right{
width:10%;
float:right;
}
Actually, a combination of these answers helped. There is a problem with the one from Teuta (https://stackoverflow.com/a/38073935/6522717) that if the screen is too small and the content on the right is bigger than the set percentage, the text then breaks onto another line. This would be solved by another #media width or, as San posted (https://stackoverflow.com/a/38074311/6522717), by assigning white-space: nowrap to the div.right.
Thank you very much for the answers as they helped a lot.
I'm a bit of an amateur when it comes to CSS/HTML web stuff but I feel I am learning a lot and am grateful of all the help offered in all the stack overflow questions. I have run into a problem and been searching for a solution for hours already, apologies if this is a duplicate but I honestly couldn't find one.
Basically, I have created a simpler version of what I am working on that demonstrates my issue:
http://jsfiddle.net/qoqq39ss/
.full {
width: 100%;
height: 100px;
background-color: yellow;
}
.mainWide {
width: 80%;
margin: 0px auto;
background-color: grey;
}
#imageBox {
display: inline-block;
width: 35%;
background-color: orange;
}
#image {
width: 80%;
height: 190px;
vertical-align: middle;
}
#textContainer {
display: inline-block;
vertical-align: middle;
width: 65%;
background-color: blue;
}
<div class="full">
</div>
<div class="mainWide">
<div id="imageBox">
<div id="image"></div>
</div><!--
--><div id="textContainer">
<h2>heading</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div><!--
--></div>
<div class="full">
</div>
Hopefully that works, first time making my own. I made them different colours to try and highlight the different divs.
The thing is, where the #image is, there would be an image, not a div. The sibling div with text in, as it varies in height due to the width of the window it can be either taller or shorter than the image. When it is taller, I need the image to be vertically centred in relation to the text, when the text is smaller I'd need the text to be vertically centred in relation to the image.
Through my searches I have seen some solutions with using a helper element of height 100% to centre elements in relation to it, though I find when I try that, it makes the helper element 100% of the height of the window as the parent element is of variable height, or maybe I am doing something wrong?
I have also seen there is an option of using tables, though I am not sure if/how that would work as I am planning of using some #media to change the image and text from being inline-blocks to blocks on top of each other for smaller screens if you get what I mean.
Apologies for the long question and if my explanation is a little off.
Many thanks in advance for any help
Since both #imageBox and #textContainer are inline-block elements, you can use
#imageBox, #textContainer {
vertical-align: middle;
}
Currently you are using it on #image, but it has no effect because #image is a block element. You should use it on #imageBox instead.
.full {
width: 100%;
height: 100px;
background-color: yellow;
}
.mainWide {
width: 80%;
margin: 0px auto;
background-color: grey;
}
#imageBox {
display: inline-block;
width: 35%;
background-color: orange;
vertical-align: middle;
}
#image {
width: 80%;
height: 100px;
}
#textContainer {
display: inline-block;
vertical-align: middle;
width: 65%;
background-color: blue;
}
<div class="full">
</div>
<div class="mainWide">
<div id="imageBox">
<div id="image"></div>
</div><!--
--><div id="textContainer">
<h2>heading</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div><!--
--></div>
<div class="full">
</div>
Im trying to place some text at the left of an image. Inline-block doesnt suffice because if the string is long enough, it just pushed the image downwards.
The goal is to have a container with a fixed width, which contains the image at the right and text filling the left, which wraps if long enough, while being vertically aligned to the bottom.
I have an initial example using floats:
.container {
width: 200px;
}
.container img {
width: 60px;
height: 60px;
float: right;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<img src="//placehold.it/60x60"/>
<h1>Text Text Text Text Text</h1>
</div>
The problem with this is that the text is vertically aligned to the top. I want it to be aligned to the bottom. I've tried everything and i just cant make it work. Any ideas?
jsFiddle demo
invert the order of your children elements and try this CSS (that emulates the use of Table elements)
.container{
display:table;
width: 200px;
}
.container > *{ /* target immediate children */
display:table-cell;
vertical-align:bottom;
}
.container img {
width: 60px;
height: 60px;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<h1>Text Text Text Text Text</h1>
<img src="//placehold.it/60x60" />
</div>
P.S: SEO (Search-Engine-Optimization) -wise it's not the best idea to have more that one <h1> inside a page. Use h1 wisely ;)
Here is what I try to achieve:
With the following HTML:
<div id="my1">
<p> some text </p>
<div id="wrap">Awesome content</div>
</div>
Having this:
text text text text text text text text text text text text text text
text text text text text div id="wrap" text text text text text
text text text text text text text text text text text text text text
Floating divs didn't help me reaching this result so far... (considering height and width for both my1 and wrap are known)?
A fiddle where the text starts from the right side of the wrapped div, when I wish it starts from the left of "my1" div, breaks around "wrap" div.
http://jsfiddle.net/matmat/dxV4X/
Looks like you want something like float:center ? Well, the problem is that this property doesn't exist.
Here are 2 alternatives:
1) Fake it with pseudo elements - FIDDLE - See this css-tricks article
Set up markup like so:
<div>
<div id="wrap">Awesome content</div>
<div id="l">
<p>left text here</p>
</div>
<div id="r">
<p>right text here</p>
</div>
</div>
With CSS
#wrap {
width:250px;
height: 250px;
background: yellow;
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#l {
float: left;
}
#r {
float: right;
}
#l, #r {
width: 49%;
}
#l:before, #r:before {
content:"";
width: 125px;
height: 250px;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
Alternative #2 (IE 10+ only): CSS Exclusions - FIDDLE
Markup
<div class="container">
<div class="exclusion">Awesome content which floats in the center</div>
<div class="dummy_text">all the text here</div>
</div>
CSS
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
background-color: lime;
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
left:0;right:0;
top:0;bottom:0;
width: 150px;
height: 100px;
background: yellow;
margin: auto;
}
For more info about CSS exclusion browser support and further resources see my answer here.
<div id="my1">
<p>some text some text
<span id="wrap">wrapped text</span>
some text some text</p>
</div>
Should work if I am reading the question correctly? A <div> is a block level element which is breaking, a <span> is inline like what you want.
Fiddle here: http://jsfiddle.net/YbuuH/2/
Use css as below:
wrap { word-wrap:break-word; }
This css should work to wrap the text in a line and to continue on next.
I have a repeatable wrapper element with children elements: content element, with left and right elements, all divs.
I want to add some text (ie, "Retired"), rotated by few degrees, like a watermark in the background of content. This can't be a background image, because this text shall be localized (and for maintenance purpose, easier to change a text instead of an image).
Next image shows a disposition of text "Retired" (without showing left and right elements):
Here's the basic HTML layout of this element, it might be useful:
<div class="wrapper">
<div class="leftcolumn">Left column</div>
<div class="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="rightcolumn">Right column</div>
</div>
And CSS:
.wrapper {
margin: 0 auto;
width: 450px;
display:block;
background-color:#222222;
border-radius: 5px;
}
.content {
float: left;
width: 318px;
padding-left: 5px;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
Here is a working code:
Html
<div id="wrapper">
<div id="leftcolumn">Left column</div>
<div id="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="rightcolumn">Right column</div>
</div>
<div id="textwatermark">
<p>Retired</p>
</div>
CSS
#textwatermark {
color: #d0d0d0;
font-size: 50pt;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:170px;
top:-100px;
}
Check the demo here:http://jsfiddle.net/x6FwG/
You could use transform:rotate(). Check this out http://www.w3schools.com/cssref/css3_pr_transform.asp . You'll have to put an Element inside an Element to get the effect you want.
Note: This won't work in older Browsers, so you may want to just use something like:
background-image:url('location.png');