If text is long then text moves to next line after image. How to wrap text around image?
CSS:
img {
float: left;
width: 200px;
height: 200px;
}
.description {
border: 1px solid #000;
display: inline;
}
http://jsfiddle.net/qw4fxdwb/
Thanks in advance.
You can do like this demo:
.wrapper-text{
word-wrap: break-word; /*fixes the text to go below*/
overflow: auto; /*fixes the whole text preventing to go below the image*/
}
Use this, if this is what you want
.wrapper-text {word-wrap:break-word;}
Fiddle
This is done by floating elements. See the fiddle
CSS:
.wrapper img
{
float:left;
margin-right:10px;
}
HTML:
<div class="wrapper">
<img src="http://placehold.it/200x200" alt="placeholder">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
Related
Suppose I have some fixed-size container and I want all elements to fit inside, but I don't know all heights of inside elements. Some element has lots of text, so I set overflow: hidden. But this element ignores the height of container and just stretches to fit contents. How do I do it right?
Edit: if I set overflow on my container, overflowing text will be hidden, but bottom padding will be ignored (see 2nd snippet). How do I cut text 5px from the bottom border, so all sides look equal?
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
<div>Some other text</div>
</div>
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
overflow: hidden;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
<div>Some other text</div>
</div>
You can nest an additional div inside of .inner (I used .inner2 in this example, you can come up with a more meaningful name! :) ).
Basically, you need to separate the background/border from the container that will control the overflow (as you're right, overflow goes to the edge of the element, it doesn't care about padding).
Just an example, but I added a second div (.inner2) inside of .inner and moved the the height and overflow rules to that one instead. The background/padding/border stay put.
Edit: Added a lime border to inner2 to better illustrate what's happening.
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
border: 1px solid black;
}
.inner2 {
height: 150px;
overflow: hidden;
border: 1px solid lime;
}
.text {
}
<div class="outer">
<div class="inner">
<div class="inner2">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
<div>Some other text</div>
</div>
I mostly don't use html\css in my professional life, but for now I have a task that requires some work with markdown.
I have a text which should be no more than 80 character width. Here is a css:
.content {
width: 80ch;
margin-left:auto;
margin-right:auto;
}
I want to embed the image like this one:
<img src="https://ucarecdn.com/4922ea06-6240-4be5-bd43-06021daa81d4/accountcredentials.png">
If I apply it simply within the same div image would go beyond borders (it has bigger width)
How can I put image within width of text block?
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="centered">
<p class="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="img">
<img src="https://ucarecdn.com/4922ea06-6240-4be5-bd43-06021daa81d4/accountcredentials.png">
</p>
</div>
.centered {
}
.content {
width: 80ch;
margin-left:auto;
margin-right:auto;
}
Did you mean like that?
.content {
width: 80ch;
margin: 0 auto;
}
img {
width: 100%;
}
<div class="centered">
<p class="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img src="https://ucarecdn.com/1d0fc207-9d61-4bf3-8e74-a273f1b4ce91/accountcredentials.png">
</p>
</div>
Image inside the p tag and width: 100%
fiddle
Set the image as a background.
.content {
width: 80ch;
margin-left:auto;
margin-right:auto;
background-image: url('https://ucarecdn.com/4922ea06-6240-4be5-bd43-06021daa81d4/accountcredentials.png');
background-size: cover;
}
You can then apply padding to the class to add spacing around the text, and the borders of the background.
Set a max-width on the image to prevent it overflowing the container.
.content img {
max-width: 100%;
}
so which approach is better for responsive design with fixed width sidebar ?
both are working normally, and now some people says that the second approach is better, some says first...
or it is all the same ?
approach 1: http://jsfiddle.net/56erp1my/33/
<div id="wrap">
<div id="header">Header</div>
<div id="sidebar">Static LEFT sidebar</div>
<div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>
<div id="footer">Footer</div>
</div>
#wrap { padding: 10px; max-width:1000px; margin: 0 auto;}
#header {background: #0f0;}
#sidebar {width: 200px; float: right; height: 200px; background: #ddd;}
#content {margin-right: 210px; min-height: 100px; background: #ddd;}
#footer {clear:both; background: #0f0;}
approach 2: http://jsfiddle.net/56erp1my/35/
<h2>With Content:</h2>
<div class="wrap">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.wrap {
background: #eee;
padding: 10px;
max-width: 960px;
overflow: hidden;
margin: 0 auto;
}
.left, .right {
padding: 5px;
}
.left {
background: tomato;
display: table-cell;
width: 9999px;
}
.right {
background: green;
width: 300px;
float: right;
}
Thank you
The second approach seems better in terms of maintenance. This is why:
If you want to change the width of the right sidebar in the first approach, you will also have to change the margin-right of the element with the class content.
While in the second approach, if you change the width of the right side bar, the content on the left will resize and re-position itself automatically.
I have a page layout which employs floating boxes with constant width and variable height, inside a variable-width container (which I'm going to make constant for the sake of this question). This is my page's code:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
When I apply this code, div 4 seems like it's "stuck" in the corner, instead of to the left of div 3 like it should be: (Codepen preview).
What am I doing wrong, and how should I fix this glitch?
You could clear the odd divs:
.profile:nth-child(odd) {
clear:left;
}
Updated Codepen
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}
<body>
<div id="main">
<div class="profile">1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)