Simple problem with CSS styling

Question

Simple problem with CSS styling

I'm having some trouble with my new website design. I am working on adding a section to the sidebar, but can't seem to get the text aligned correctly next to the image. I've attempted to float the text left, but it's not displaying as desired. Currently, the only CSS I have in place is that the sidebar is 300px wide.

<div id="sidebarabout">
    <h3>About Elliott Davidson</h3>
    <img src="http://placehold.it/100x100"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. <a href="about.html">Continue reading</a></p>
</div>

html css

Answer 1

Answer №1

Include this styling in your CSS and see the results:

img{float:left;margin-right:15px;}

https://jsfiddle.net/exampleuser/abcdef123/

Answer 2

Include this styling in your CSS and see the results:

img{float:left;margin-right:15px;}

https://jsfiddle.net/exampleuser/abcdef123/

Answer 3

Answer №2

Check out this example

<p><img src="http://placeholder.com/200x200"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare vehicula sem, id egestas felis mollis vel. Duis ac ex eget ligula rhoncus convallis et id risus. <a href="details.html">Read more</a></p>

Answer 4

Check out this example

<p><img src="http://placeholder.com/200x200"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare vehicula sem, id egestas felis mollis vel. Duis ac ex eget ligula rhoncus convallis et id risus. <a href="details.html">Read more</a></p>

Answer 5

Answer №3

img{float:right;margin:0 15px 0 0}

If you want to give your image some space, it's better to use margin instead of padding. Padding can make your image appear squeezed.

Answer 6

img{float:right;margin:0 15px 0 0}

If you want to give your image some space, it's better to use margin instead of padding. Padding can make your image appear squeezed.

Answer 7

Answer №4

To make the img and p elements display inline or inline-block, adjust their CSS styles accordingly.

Additionally, consider setting a width depending on how you want your text to "float".

https://jsfiddle.net/xoL510og/ << Example

<div id="sidebarabout">
    <h3>About Elliott Davidson</h3>
    <img style='display:inline-block;' src="http://placehold.it/100x100"><p style='display:inline-block; width:400px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. <a href="about.html">Continue reading</a></p>
</div>

Answer 8

To make the img and p elements display inline or inline-block, adjust their CSS styles accordingly.

Additionally, consider setting a width depending on how you want your text to "float".

https://jsfiddle.net/xoL510og/ << Example

<div id="sidebarabout">
    <h3>About Elliott Davidson</h3>
    <img style='display:inline-block;' src="http://placehold.it/100x100"><p style='display:inline-block; width:400px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. <a href="about.html">Continue reading</a></p>
</div>

Answer 9

Answer №5

To achieve the desired layout, you can apply the CSS property display: table;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



.item-inner{
    display: table;
    width: 100%;    
    padding: 20px;
}
.item{
    display: table-cell;
    vertical-align: top;
}
.item-text{
    padding-left: 15px;
}

   
    <div class="item-inner">
        <div class="item">
            <img src="http://placehold.it/100x100" />
        </div>
        <div class="item item-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. <a href="about.html">Continue reading</a></p>
        </div>

Answer 10

To achieve the desired layout, you can apply the CSS property display: table;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



.item-inner{
    display: table;
    width: 100%;    
    padding: 20px;
}
.item{
    display: table-cell;
    vertical-align: top;
}
.item-text{
    padding-left: 15px;
}

   
    <div class="item-inner">
        <div class="item">
            <img src="http://placehold.it/100x100" />
        </div>
        <div class="item item-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. <a href="about.html">Continue reading</a></p>
        </div>

Answer 11

Answer №6

To ensure that the img markup only applies to the sidebarabout div, it is important to define the div before adding the img styling. For example:

#sidebarabout img{
  float: left;
  padding: 0 15px 0 0;
}

If you have set a width of 200px for your paragraph element, make sure to adjust it to 185px to accommodate the 15px padding. Failing to do so may result in a webpage layout issue as the div width will exceed 315px.

While some suggest using margin, this could shift the image outside the div by 15px to the left. This should be avoided.

Furthermore, don't forget to include attributes such as width, height, and alt when defining your img element correctly to ensure it passes the W3C validator. Use the following format:

<img src="http://placehold.it/100x100" width="100" height="100" alt="Description">

Answer 12

To ensure that the img markup only applies to the sidebarabout div, it is important to define the div before adding the img styling. For example:

#sidebarabout img{
  float: left;
  padding: 0 15px 0 0;
}

If you have set a width of 200px for your paragraph element, make sure to adjust it to 185px to accommodate the 15px padding. Failing to do so may result in a webpage layout issue as the div width will exceed 315px.

While some suggest using margin, this could shift the image outside the div by 15px to the left. This should be avoided.

Furthermore, don't forget to include attributes such as width, height, and alt when defining your img element correctly to ensure it passes the W3C validator. Use the following format:

<img src="http://placehold.it/100x100" width="100" height="100" alt="Description">

Simple problem with CSS styling

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating a persistent sticky element that remains at the forefront in Electron or JavaScript development

Adjust the Subnav <li> element to take up 100% width and reposition the dropdown menu

How to write a more advanced Path for Selenium Chrome WebDriver using C#

Denied running the inline script in Redocly

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

Creating collapsible column functionality for the <td> element within a <tr> in mobile view using React

Is there a way to modify the commandlink image when the mouse hovers over it in PrimeFaces?

Unraveling HTML in TypeScript with Angular 2

Unable to submit form when using image type buttons

Executing a PHP script to initiate a ping transmission

Is there a common issue in web browsers? Neglecting the position relative attribute on 'tbody', 'tr', and 'td' elements?

Mastering CSS States: Hover and Active

Tips for preventing route changes when clicking on a hash tag in AngularJS

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

Inconsistent Responsiveness of CSS Search Bar

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Disabling the onClick event on HTML tags with personalized WooCommerce messages

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

The presentation changes when styling is added through the <link> element

CSS: inner division layering on top of each other