I currently have some text that is left aligned but centered as follows:
<div class="center-text">There is some text here</div>
<div class="center-text">There is also some other text here</div>
<div class="center-text">Finally there is some text here</div>
.center-text {
width: 50%;
margin: auto;
}
How can I float an image to the left of the text that is in the bottom right corner? What I'm looking for is the following:
The black frame is the surrounding div, the red is the image and the text is as described above. My text is currently behaving as expected but I can't seem to add the image without impacting the text.
I made it a little bit different:
.container{
height: 300px;
position:relative;
border: 30px solid black;
}
.center-text {
width: 100%;
}
p {
margin: 0;
}
img{
position: absolute;
bottom: 0;
left: 0;
width:30%;
}
.text{
float: right;
width: 65%;
margin-top: 100px;
}
<div class="container">
<div class="center-text">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLwIM4lLwdmXvvYio988Z70kxTBtoNudITd9_72iGRjlusoVey" />
<div class="text">
<p>There is some text here</p>
<p>There is also some other text here</p>
<p>Finally there is some text here</p>
<p>Finally there is some text here</p>
<p>Finally there is some text here</p>
</div>
</div>
</div>
I hope it also helps you :)
Related
Effectively, I'm trying to move/position the inner paragraph element (p) from within the .box div (blue box) to be positioned above the .box div (blue box) in the fiddle below:
html, body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
My expected output is:
html,
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
.contents {
position: relative;
top: -50px;
}
<div class="container">
<h4>Box heading</h4>
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
<div class="box">
<div class="contents"></div>
</div>
</div>
However, in the above snippet, I have physically placed the paragraph elements above the blue box (.box div). Is there a way to essentially move the paragraph element from within the blue box above it using css.
I've tried using position attribute or giving the .contents a negative margin, however, this doesn't add space for the text to go above and causes overlapping issue with the heading and/or the blue box.
Note: The paragraphs within the box can be of any length, so I don't know the height and thus the offset needed for the paragraph.
You can consider position:relative for the content element and its container and use the same amount of pixel:
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
position: relative;
top: 110px;
}
.contents {
position: relative;
top: -110px;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
Or consider translate for a more dynamic way:
body {
margin: 0;
}
.box {
height: 200px;
width: 400px;
background: aqua;
color: black;
transform:translateY(40%); /*use 100% if height auto*/
}
.contents {
transform:translateY(-100%);
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
You could remove the styles from .box on mobile and add them to .content::after. This will allow for any amount of content in the paragraphs and grow accordingly.
html, body {
margin: 0;
}
.box,
.contents::after {
height: 200px;
width: 400px;
background: aqua;
color: black;
}
/* Mobile only styles */
.box {
height: auto;
width: auto;
background: none;
}
.contents::after {
content: '';
display: block;
}
<div class="container">
<h4>Box heading</h4>
<div class="box">
<div class="contents">
<p>This is some awesome text, which is inside the box</p>
<p>This is also another great paragraph that is better than any book ever written</p>
</div>
</div>
</div>
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');
Basically what I want to do, considering the example below, is to create a fluid and dynamic background width depending on the text size with more than one line. This because I have set a justified text alignment and at some point (e.g. in the second line) the text doesn't fill up all the width of the background, which is enlarged by the upper sentence which is bigger. I don't want the background to fill it up! I don't know if I'm making myself clear, but I'll try to explain with the example below.
http://jsfiddle.net/gcAhL/
HTML
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title">This is a title</div>
</div>
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>
</div>
CSS
.image {
position: relative;
width: 800px;
height: 530px;
margin: 10px;
}
.title {
position: absolute;
background-color: #CCC;
text-align: justify;
max-width: 600px;
bottom: 30px;
padding: 5px;
}
As you can see, the last blue square has text that breaks into two lines. The greyish background fills up the width basing itself on the first line. What I want to happen is that in the second line, the grey fills the text of that line only.
Example: http://s9.postimg.org/634pzc9y7/example.jpg
Is this even possible? Thanks in advance for all the responses.
Just use <span> element inside of your <div> and give background-color to <span> element instead of <div>.
HTML
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title"><span>This is a title</span></div>
</div>
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title"><span>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</span></div>
</div>
CSS
.image {
position: relative;
width: 800px;
height: 530px;
margin: 10px;
}
span{background-color: #CCC;}
.title {
position: absolute;
line-height:100%;
text-align: justify;
max-width: 600px;
bottom: 30px;
padding: 5px;
}
This is a CSS question that's driving me up the wall. Below is the code I currently have, and I want the description text to be to the right of the blue box (i.e. under the title), but for it to continue over, under the 'button'. I've tried various combinations, but they all either start at the current position or underneath the title but indented by its width.
Any help greatly appreciated
<html>
<head>
<style>
body { background-color: #fff; color: white; }
.outer { width: 850px; height: 400px; background-color: #000; }
.logo {float: left; width:150px;height:150px;background-color: #00f;}
.button {float: right; height: 60px; width: 80px; background-color: #f00; }
.title { font-size: 60px; float:left;}
.desc {clear:both;}
</style>
</head>
<body>
<div class="outer">
<div class="head">
<div class="logo">oo</div>
<div>
<div class="title">Title</div>
<div class="button">button</div>
<div class="desc">description text description text description text description text description text description text description text description text description text description text description text description text</div>
</div>
</div>
</div>
</body>
</html>
The text should be where the white box is in the image above.
Now that should be very simple eh? Just float it to the left and give it a width...
Demo
CSS
.desc {
float: left;
width: 650px;
padding: 10px;
}