I've managed to align side by side the DIV containing the image, and the DIV containing the text, side by side, by applying float:left to the image DIV.
But when I Include these two DIVs in a parent DIV, and duplicate the parent and try to align the parents side by side by applying float:left to the first parent, it doesn't work.
Here's my code:
<div style="width:350px;min-height: 200px; float:left;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
and fiddle.
I also wonder whether the rest of the code is best practice, such as padding-left:135px - would it be better to use relative padding from the image, rather than the parent div? if so, what's the easiest way to change that?
You have the float:left outside of the style attribute, try moving that inside the speech marks and applying float: left to both parent divs.
Updated Fiddle
You can simply change your code to the below, giving each div a display:inline-block; then as long as your browser window is greater than the sum of the two div widths, they will display inline, no need for floats:
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
That said I would strongly recommend you separate your CSS from your HTML in order to make a clear distinction between content and presentation and capture the clear benefits that offers.
You had one of your float: left attributes outside of the style tag. Also, you should use CSS classes instead of putting all of your CSS styles inline. It makes your code much neater and prevents a lot of duplicated styling. Here is an updated Fiddle.
HTML
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
CSS
.parent {
width:350px;
min-height: 200px;
float:left;
}
.title {
font-size:15pt;
color:red;
letter-spacing:-.04em;
padding-top:2px;
padding-left:135px;
}
.text {
font-size:11pt;
color:black;
letter-spacing:-.02em;
margin-top:4px;
padding-left:135px;
}
.image-wrap {
float: left;
}
.image {
border: 1px solid black;
padding:1px;
}
Related
Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
Fiddle: http://jsfiddle.net/y8d2q3ww/2/
.flex-container{display:flex;width:100%}
.square{flex-basis:55px;background:yellow}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text </div>
</div>
Only when the text doesn't wrap, the .square's width will be 55px as the flex-basis property sets; but if the text is more than one line, the actual width will be scaled down. So what is behind this? And how do I make the .square area have a fixed width(be it px or %) no matter what content the other flex items hold?
.square shrinks if .text overflows, because you did not specify flex-shrink, which defaults to 1.
Set it to 0 to get the desired result:
.flex-container {
display: flex;
width: 100%
}
.square {
flex-basis: 20%;
flex-shrink: 0;
background: yellow
}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</div>
</div>
Here is my code:
<img id="mepic" src="images/example.jpg" width="70px" height"60px">
<p>This is some example text that i want next to the image on the right hand side</p>
At the moment, the text is underneath the image. How do I put the text next to the image?
NO CSS & JavaScript, PURE HTML
<p><img src="image.png" alt="image"/> Text beside image</p>
Place <img> inside a <p> can put the image surround by text. Read more here.
NOTE: <img> tag has display: inline by default and is basic a non-breaking space, read more here.
<p>This is some text.
<img src="http://placehold.it/60x60" alt="Smiley face"> This is some text.</p><br/>
<p>
<img src="http://placehold.it/60x60" alt="Smiley face" align="middle"> This text is next to the image</p>
you can do it without changing the html structure
As img is a inline element you can set the next sibling p to inline
By default p is a block element so it is taking full width
more about + selector
img + p {
display: inline;
margin-left: 10px;
vertical-align: top; /* so that p aligns to the top of img*/
}
<img id="mepic" src="http://placehold.it/70x60" width="70" height="60">
<p>This is some example text that i want next to the image on the right hand side</p>
If you want to place text to right side of an image, here's code which will allow it:
<p><img src="example.jpg" alt="img"> Image text here.</p>
Running example: https://jsfiddle.net/apc5spcu/
Alternately, you could use divs and make a nicer looking image form.
HTML
<div class="container">
<div class="imgdiv">
<img src="example.jpg" alt="img">
</div>
<div class="textdiv">
<p> Image text here.</p>
<p> Image text here.</p>
<p> Image text here.</p>
<p> Image text here.</p>
</div>
This code makes use of 'Float' which positions each division next to eachother on left and right sides.
CSS
.container {
width:540px;
}
.imgdiv {
float:left;
width:140px;
}
.textdiv {
float:right;
width:300px;
}
Running example: https://jsfiddle.net/apc5spcu/1/
As a side note, since you tagged this as HTML5, you would be better off using <figure> and <figcaption> to mark up this content.
For example:
<figure>
<img id="mepic" src="images/example.jpg" alt="Text" />
<figcaption>This is some example text that i want next to the image on the right hand side</figcaption>
</figure>
Then you could style it like:
figure {
margin: 0;
width: 600px;
height: auto;
overflow: hidden;
}
figure img {
width: 30%;
float: left;
}
figure figcaption {
width: 70%;
float: right;
}
I have a liquid layout page that has a max and min width of the body set (1260px and 960px, respectively). I have a left-hand sidebar that takes up the left 25% and the content which takes up the right 75% of the screen. Within the content I have placed two div containers with fixed width pictures in them (300px x 225px) with some text below each.
What I would like to do is to have those div boxes remain their own static width (300px as determined by the width of the picture above the text) but to be able to remain, for argument's sake, 50px apart inline and always in the center (bar the 50px apart) despite what browser I have them in (either the 1260 or 960px, or somewhere inbetween). The reason that I would like this is that if I use margin to separate them they only look 'centered' (again, bar the 50px in between them) in one browser width and aren't liquid in their layout.
JSFiddle: http://jsfiddle.net/fpN5t/1/
Please let me know if I'm not explaining myself very well!
Thank you so much in advance.
<div id="content">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<h1 class="first-content-heading">Heading 1</h1>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h2>Heading 2</h2>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h3>Heading 3</h3>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
</div>
#content {
width: 75%;
float: left;
margin: 0;
background: #FFF;
}
#upper-left-box {
width: 300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.first-content-heading {
clear: both;
}
You can center the upper boxes by putting a container around them with margin auto. Then you can place a 50px margin in between the boxes for the effect you are looking for"
http://jsfiddle.net/fpN5t/2/
<div class="upper-boxes">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
</div>
.upper-boxes{ width: 650px; margin: 0 auto; }
#upper-left-box {
width: 300px;
margin:0 50px 0 0;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
position: relative;
text-align: center;
float: left;
}
Hopefully I understood the problem correctly, if not please indicate.
I would like to do this using CSS:
Ssing only ul li, and a elements. The red bullets would be invisible.
How can I do this? I've tried using float:left for the horizontal outer bullet list and a normal vertical bullet list for the inner one, but it did not works.
Is there a better way than bullet list?
I'm just going to throw this out there as a viable solution. Why not use div elements? Here's an example:
CSS --
.container {
width : 400px;
margin : 0;
padding : 0;
}
.col {
display : inline-block;
width : 100px;
vertical-align : top;
}
.col.double {
width : 200px;
}
HTML --
<div class="container">
<div class="row">
<div class="col">9</div>
<div class="col">0</div>
<div class="col">TITLE</div>
</div>
<div class="row">
<div class="col double">{image}</div>
<div class="col">text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
Here is a demo: http://jsfiddle.net/a9m76/1/