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>
Related
I'm doing a rework on a website which includes adding a company's logo in-between 2 pieces of text for the navigation bar.
A problem I run into is that, while the original pieces of text have different div id's and are floating in opposite directions (one is floating left, and the other right), when I add the logo as an '', it off-puts the text floating to the right of the screen.
The text on the right would not only display on the next line but there was some issues with the image floating to the center where I had originally planned it to be.
I tried using 'display: flex;' on the container element, and while this sorted the issue of everything being on the same line, the image remained planted beside the text on the left and was not floating to the center. Additionally I tried using '' on the '' of the logo in the html but it remained put.
Next I tried using 'display: inline;' and 'display: inline-block;'. While they did work as an alternative to using 'display: flex;', they posed as inline properties which again, posed issues for the positioning of the image.
Below I have some pictures of my issue with the black box representing text and the dark green representing the logo.
text floating underneath
logo stuck beside text on the left
The code currently being used:
#topleft {
text-align: center;
float: left;
}
#topmiddle {
display: inline-block;
text-align: center;
padding: 0 50px 0 50px;
}
#topright {
text-align: center;
float: right;
}
<div id="topleft">
<h2>-------------</h2>
</div>
<div id="topmiddle">
<img src="./img/logo.png">
</div>
<div id="topright">
<h2>-------------</h2>
</div>
what I want it to look like
#topleft {
text-align: center;
float: left;
}
#topmiddle {
display: inline-block;
text-align: center;
padding: 0 50px 0 50px;
}
#topright {
text-align: center;
float: right;
}
#nav{
width:100%;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
<div id="nav">
<div id="topleft">
<h2>-------------</h2>
</div>
<div id="topmiddle">
<img src="./img/logo.png">
</div>
<div id="topright">
<h2>-------------</h2>
</div>
</div>
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>
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 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 ;)
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!