How to float left without wrapping to next line?


Tags: html,css

Problem :

So I'm trying to move my section to the same line without it stacking on top of each other and going to the next line. How can I do this?

Here's my code:

<section>

    <img src="http://www.w3newbie.com/wp-content/uploads/trainers.png"</>
    <h1>Stay Connected!</h1>
    <p>Random Text just to fill space.</p>

    <img src="http://www.w3newbie.com/wp-content/uploads/location.png"</>
    <h1>Oh New Jersey...</h1>
    <p>Based in New Jersey I couldn't be happier where I am today...</p>

    <img src="http://www.w3newbie.com/wp-content/uploads/check.png"</>
    <h1>Keep Updated!</h1>
    <p>Subscriber Count: 2,458<br> Twitter Followers: 869<br>Instagram</p>        

</section>

and here's my CSS for it:

section{
    width: 29%;
    float: left;
    text-align: center; 
}


Solution :

Instead of putting all those elements in one section element, wrap each module in a section. Then your CSS will work.

<section>
    <img src="http://www.w3newbie.com/wp-content/uploads/trainers.png" />
    <h1>Stay Connected!</h1>
    <p>Random Text just to fill space.</p>
</section>

<section>
    <img src="http://www.w3newbie.com/wp-content/uploads/location.png" />
    <h1>Oh New Jersey...</h1>
    <p>Based in New Jersey I couldn't be happier where I am today...</p>
</section>

<section>
    <img src="http://www.w3newbie.com/wp-content/uploads/check.png" />
    <h1>Keep Updated!</h1>
    <p>Subscriber Count: 2,458
        <br> Twitter Followers: 869
        <br>Instagram</p>
</section>

DEMO

Also, a correction was needed at the end of each <img> tag. You had invalid self-closing tags (</>).


    CSS Howto..

    How can I properly add CSS and JavaScript to an HTML document?

    css floating problem: how to get a left float to wrap around a right float

    How do you tell which css class to modify?[Example inside]

    How to add load more button for a HTML/CSS page?

    how do i avoid this title from overflowing?

    How to give equal width for all the fields in the form with validations?

    Odd visual effect (little line shows) when hovering over button in browser

    How to avoid third party CSS to affect current CSS? [closed]

    how to select all list items except for the first and last using CSS only?

    How to prevent the background image from getting blurry

    How to fill a rectange from center html , css

    How to stop DIVS from colliding when page resized (footer)?

    continue with same Show and hide divs when we change page

    Why do the Google Fonts fail to show up on my website?

    How to make sure that dynamic DOM elements have correct css using jQuery mobile

    How do I create a styleClass to use this CSS?

    how to make dropdown using html and css?

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    Show/Hide Html TR/TD

    CSS: How to limit horizontal/vertical scrolling?

    how to create an alphabet letter selector that spans an entire div width

    Only Javascript code to show a class without onclick

    How to unfold or close content in html/JS - always assigned to different id

    How to center image with full height and variable width

    How to make a dotted underline link on hover?

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    How to invert colors using CSS on hover

    How to create a 3 columns fluid fixed fluid layout?

    How do I align form inputs nicely on top of a picture?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?