Can't place image next to text (pushed into next div)
Question
I want to place an image next to some text inside a div but the image was pushed into the next div below and won't move up no matter how much I increase the margin or padding. I want the center of the image to be where the tip of the arrow is in the picture:
Here's where the image is and where I want it to be
Here's the CSS and HTML:
.header { padding: 10px 16px; background: #1919ff; color: #f1f1f1; } #about { background-color: #ccccff; height: 400px; width: 67%; margin: auto; } .round-border{ border-width: 0px; border-style: solid; border-radius: 50%; } .portrait-image{ width: 25%; margin-bottom: 120%; } h9 { font-size: 142%; margin: auto; padding-right: 30%; padding-top: 12%; display: inline-block; } .header-bar{ height: 3px; width: 51%; background: #272C31; margin-right: 23%; margin-top: 3%; } h10 { font-size: 142%; margin: auto; padding-right: 24%; padding-top: 5%; display: inline-block; } #image position { position: relative; z-index: 1; margin-botton: 40%; padding-bottom: 20%; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <style> img { float: right; } .clearfix { overflow: auto; } </style> <div class="header" id="myHeader"> <h2> xxxxxxxxx</h2> </div> <body style="background-color: #5D6D7E;"> <div id="about" align="center" position="relative"> <h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </h9> <div class="header-bar"></div> <h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </h10> <div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait"> </div> </div> </body>
Any help would be greatly appreciated, thanks.
3 answers
solution1
1 2018-03-09 16:36:14
You can use CSS float. It is for elements that 'float' to the side of a text.
Try setting:
#image-position {
/* ... Your css here */
float: right;
}
More information here .
solution2
1 ACCPTED 2018-03-09 17:12:43
There were many things wrong with your code and I'm not sure where to begin. There are no h9 or h10 header tags. I would suggest using valid header tags and modifying the font-size according to your taste. Also, you can't have a class/id name separated by a space. So, "image position" will not work. Fixed it the best way I could.
.header { padding: 10px 16px; background: #1919ff; color: #f1f1f1; } #about { background-color: #ccccff; height: 400px; width: 67%; margin: auto; box-sizing: border-box; } .round-border { border-radius: 50%; } .portrait-image { width: 25%; } .header-bar { height: 3px; width: 51%; background: #272C31; margin-right: 23%; margin-top: 3%; } #image-position { float: right; margin: 15% 5% 0 0; } #text { float: left; width: 57%; word-break: break-all; margin: 5%; } .clearfix { /*clear the floats here*/ }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <body style="background-color: #5D6D7E;"> <div class="header" id="myHeader"> <h2> xxxxxxxxx</h2> </div> <div id="about" class="clearfix"> <div id="text"> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <div class="header-bar"></div> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait"> </div> </body>
solution3
0 2018-03-09 16:48:37
Use bootstrap to achive this, try the below code snippet.
<div class="container">
<div class="row">
<div class="col-md-8">
<p>
Your text goes here...
</p>
</div>
<div class="col-md-4">
<img src="">
</div>
</div>
</div>
I hope this helps,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.