Align elements of content block in html using .css file - html

I have a block in html and I need to align text and image in it using only .css file. Text should be on the left side and image on the right. I am completely new to css, so not sure where to start. As such, any advice would be very appreciated.
<div class="tm-content-box flex-2-col">
<div class="padding-medium flex-item tm-team-description-container flex-item">
<h2 class="tm-section-title">Some Text</h2>
<p class="tm-section-description">Some More Text</p>
<p class="tm-section-description">Some More Text</p>
</div>
<div class="flex-item">
<img src="img/image1.jpg" alt="image1">
</div>
</div>

simply add display flex like this:
.tm-content-box {
display: flex;
}
I recommend you check the CSS flexbox. It will help you to make a more complicated design using plain CSS. You can check it from w3schools

Related

Create a Header in Bootstrap 4 with correctly aligned logo

I'm trying to create a header in bootstrap 4 like this:
I'm facing several problems with this approach. Firstly the logo is not properly centered to the middle. I've tried several methods to avoid this including align=middle, margin on the bottom (which adds more space on the bottom than the space that's already on top-side) and the grid-system with col-1 and col-9. The last one creates to much space between the logo and the heading.
The image includes the version which contains the image in the HTML h1 element. Here is the source to create the logo:
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text
<small class="text-white-50">
The new way of doing text-research</small></h1>
Am I doing something wrong? Bootstrap examples with an included logo are very rare. Maybe it has a reason...
Additional information
The small text shouldn't be centered.
I want to achieve this with bootstrap utilities only.
Use a flexbox for all items. Don't put the image and text inside the h1.
div {
display: flex;
align-items: center/* vertical alignment */
}
small {
font-size: 1rem;
}
<div>
<img src="https://via.placeholder.com/64x64" width=64 height=64 />
<h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>
</div>
Since there is no html posted i am going to assume you have bootsrap basics in place:
Assuming you have something like this
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header">
<span>
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64/>
some text
<small>The new way of doing text-research</small>
</h1>
</span>
</div>
</div>
</div>
EDIT: REMOVED CUSTOM CSS
PLease note that having the html in this way is not recommended.
But if you are insistent that you not use any custom css this solution should solve the problem.
I hope this is what you are looking for.
Check updated code pen https://codepen.io/Jsilvestri/pen/vzzJRy

<p> elements not included in height of containing <div>

I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though

Can't figure out how to align HTML/CSS Divs

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

CSS boxes inline and responsive

I have this code:
<h3>Title</h3>
<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>
http://jsfiddle.net/xpccL9h8/
i want to be able to set the title (in the tags) to be above the boxes and allow all the boxes to display inline and responsively
its not currently showing the titles above the boxes as it should (like they are above in the HTML code)
You should maybe try for .col-1-4 display: inline-block; instead of float:left
jsfiddle here

make an image and a paragraph sit next to each other

I have a box with an image and some txt and I want the txt to be horizontal to the image. I know this may be a pretty easy question but I can't seem to find a good answer on the interwebs. thanks for any help.
<div id='container'>
<img src='someimage.jpg'/>
<p>some text</p>
</div>
Take a look at CSS's float property, for example:
<div id='container'>
<img src='someimage.jpg' style='float: left;'/>
<p>some text (that will now wrap around the image</p>
</div>
Since Rowland's 2010 answer, CSS has come a long way. Today we have Flexbox which is a part of CSS for controlling layout of elements in a row or column. It has a great deal of flexibility for handling alignment within the box and expanding or shrinking elements to fit.
Here is a simple example of how to style the HTML you provided (with the image URL changed to one that will render here).
#container {
display: flex;
align-items: center;
}
#container p {
margin-left: 1em;
}
<div id='container'>
<img src='http://placekitten.com/100/100' alt="" />
<p>some text</p>
</div>
The MDN tutorial linked above is a good place to learn more.
I recommend you to put the text and the image in a table, in the same row, the image would be in the first column, while the text goes to the second column in the first row . here's the code
<div id='container'>
<table>
<tr>
<td><img src='someimage.jpg'/></td>
<td><p>some text</p></td>
</tr>
</table>
</div>