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;}
Related
I am having an image and text to be displayed on a page. Is there any way to have fixed distance between the both? Tried with media queries but couldn't do it.
<div id="element">
Text Here
<div class="imagehere">
<img src="./img/pic.jpeg"/>
</div>
</div>
Note: The text need to be displayed above the image. Problem is the text is disappearing when the image overlaps with it.
Add this style
.imagehere {
margin-top: 10px; /* This will be fixed distance */
}
A simple margin will do the trick:
.text-wrapper {
margin-bottom: 30px;
}
<div id="element">
<div class="text-wrapper">Text Here</div>
<div class="imagehere">
<img src="./img/pic.jpeg" />
</div>
</div>
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.
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
So I am trying to get the text beneath an image to not go wider than the image itself. I can't quite figure it out.
It would be easy if the parent div had a fixed width, but the width of the parent and the image within are variable based on the image width.
I have it as a sibling currently, but maybe making it a child on the image div is the solution.
Here is a jsfiddle: http://jsfiddle.net/z6f15coy/1/
<div class='parent'>
<div class="child_1">
<img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg" >
</div>
<div class="child_2">
Some text that is wider than the image goes here... Lorem ipsum whatever.
</div>
</div>
Sincere thanks for any help. It is greatly appreciated.
You could relay on table display behavior :
.parent {
border: 1px solid #c4c4c4;
padding:5px;
margin:5px;
display:table;
width:1px;/* will extand to fit longest content (image or a very long word) */
}
<div class='parent' style="">
<div class="child_1">
<img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg">
</div>
<div class="child_2">Some text that is wider than the image goes here... Lorem ipsum whatever.</div>
</div>
Define a width for that div?
try this if i got you.
http://jsfiddle.net/z6f15coy/2/
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! :)