I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks
Related
I'm sure it's an easy question but I can't figure it out.
I have this code basically
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
I want the image to align to the right of the text within the div. Everything I've tried so far takes the image out of the normal page flow making the div not respect the height of the image. I can't just explicitly state the height of the div because the image inside is dynamic and only of set width.
Here's what the page looks like.
How do I align the image to the right of the div and still have the div respect the height of the image.
Basically your div must have overflow:hidden, look example:
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
Alternatively you can put <div style="clear:both"></div> after each div
In css set the overflow of the div that has to respect the height of the image to auto.
div {
overflow: auto;
}
It is because of the float on the image. In order to fix this, you may use a method called clearfix on the container element: div.infobox
.infoBox:after {
content: "";
display: table;
clear: both;
}
Fiddle here.
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)
I am trying to make my own website and only know some basic HTML, I've searched the web for a bit and can't seem to figure out how to place text under an image and on the left of the image.
So pretty much:
[image] [text]
[text]
would pretty much be my layout of the web page. At the moment I can only float the image or align it to the left making the text wrap around the image, which I don't want. Can someone help me?
<div style="width:400px; clear:both;">
<img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
<div style="width:100px; float:left;">
text beside image
</div>
</div>
<div style="clear:both;">
text beneath image
</div>
http://jsfiddle.net/Tw2v7/
This is a simple layout matter; I think it should be done without using a table.
You can add an additional "clear: both"-Element behind the text you are floating next to the image, like so:
http://jsfiddle.net/nENVN/
I would suggest using divs instead of tables and then using CSS to size and position the divs
<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>
This is the basic style for the above
.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}
the ltext div would then be set to a width that is to wide to sit next to the image or the rtext div. It would then be forced to sit below the other 2 divs. This should achieve the look you want.
Use floats:
<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>
The text will appear beside the image and then wrap around to the bottom if it's long enough
Is this what youre after?
http://jsfiddle.net/ptzDw/
Basic HTML Structure:
<div id="wrap">
<div id="left">
<img src="http://dummyimage.com/300x90/7999/fff" alt="image">
<p>text goes here</p>
</div>
<div id="right">
<p>text goes here</p>
</div>
</div>
CSS:
#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}