If you take a look at the following jsfiddle:
http://jsfiddle.net/xs5trzxx/
<div class="box">
<h1>This heading</h1>
<h1>This is one heading</h1>
</div>
.box {
width: 350px;
}
h1 {
display: inline-block;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
As you can see the width of the first heading is the width of the text and the background image sits nicely after the text. In the second heading though the width of the heading doesn't fit to the width of the text so the background image is floating off to the right.
How can I make the width of the headings always shrink to be as small as possible so that the background image is always close to the text?
Please remove width
h1 {
display: inline-block;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
<div class="box">
<h1>This is one heading</h1>
<h1>This heading</h1>
</div>
If you want to show all h1 in new line then add all h1 in different div tag
You could set the headings to display: inline;. But you'll also have to clear them if you have more than one (to prevent them sitting side by side, which is easy enough but off topic).
.box {
width: 350px;
}
h1 {
display: inline;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
<div class="box">
<h1>This is one heading</h1>
</div>
Remove width of ".box" will make it work. But the heading will always 1 line. If you allow multi-line heading, maybe you can try below:
.headTxt {
float:left;
width: 150px;
margin:0px;
}
.headImg {
float: left
}
<div>
<h1 class="headTxt">This is one heading</h1>
<div class="headImg"><img src='http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png' /></div>
</div>
Related
I'm not sure how to fix this: image directly positioned underneath some text, and stays directly underneath that text when the window is resized. My problem is I can't just float the image left, it needs to be further out, and move inline with some text. Like centring an image, it will always stay in the relative centre, even when the page is resized.
EDIT: I think the problem is I have 3 sections of text next to each other formatted like this, and they move when the page is resized:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="example.css"/>
<p>this is the text which the image should follow (stay inline with)
</p>
<p>third section middle</p>
<p>third section right</p>
<img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png"/>
CSS:
p{
float:left;
width:33.33333%;
text-align: center;
color: #2A3132;
}
img{
width: 10%;
}
And I want that image to stay in the centre of that text when the page is resized. I hope this helps.
put inside of the parent content
.content{
background: yellow;
padding: 5px;
border: 1px solid red;
}
p{
display: inline-block;
margin-right: -4px;
width:33.33333%;
text-align: center;
color: #2A3132;
background: red;
vertical-align: top;
}
img{
display: block;
margin: 0 auto;
}
<div class="content">
<p>this is the text which the image should follow (stay inline with)</p>
<p>third section middle</p>
<p>third section right</p>
<img src="http://devimg.com/100x100/"/>
</div>
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
Im floating a heading to the left and a div containing a few links to the right. At wide screen widths everything is fine.
At smaller widths the links appear under the heading. Instead I need the heading to wrap.
My content is dynamic, the heading text will vary in length and the number of links with vary also. Therefore I dont believe I can use % widths.
I can alter the HTML however I need to keep the heading above the links in the HTML. This is because for the smallest media query the heading will be above the links.
http://codepen.io/anon/pen/OPxbxG
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</div>
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
float: left;
margin: 0;
}
.links {
float: right;
}
Did you mean something like that : http://codepen.io/anon/pen/ZYXBoB ?
I just remove the float:left; on the title and put it after the menu in DOM.
1) Place the links first in the markup
2) Set overflow:hidden (or auto) on the heading instead of float:left
Updated Codepen (Resize page to see this work)
The reason why this works is that setting overflow:hidden (or auto) establishes a new block formatting context. For more info see this post.
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
overflow: hidden;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<div class="links">
Link one
Link two
</div>
<h1>Title goes here</h1>
</div>
If CSS3 is an option, then you can use flexbox to acheive this, without having to change the order of the markup.
Just set display:flex on the container and flex:1 on the heading to fill remaining viewport width (not taken by the links)
Updated Codepen
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
display: flex;
}
h1 {
flex: 1;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</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 ;)