WordPress.org

Ready to get started?Download WordPress

Forums

How to Add Two Divs Next to One Another? (6 posts)

  1. agfreesafety
    Member
    Posted 1 year ago #

    I would like to create two divs that are next to one another to this page.

    Just so I can get the hang of how to do it, I'd just like to place a single paragraph of the test data on that page in each column that's stacked next to one another.

    This forum post says to add the following CSS code:

    #leftcolumn { width: 300px; border: 1px solid red; float: left}
    #rightcolumn { width: 300px; border: 1px solid red; float: right}

    ...and then add this to the html of the page that I want to create the two columns on:

    <div id="leftcolumn"><p>text goes here</p></div>
    <div id="rightcolumn"><p>text goes here</p></div>

    My question:

    1. Does the CSS portion go into the style.css? If so, where?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, CSS goes in style.css - generally at the end - and you should generally be using either a Child Theme or custom CSS. Do not modify the theme's original style.css.

  3. agfreesafety
    Member
    Posted 1 year ago #

    Yes, CSS goes in style.css - generally at the end - and you should generally be using either a Child Theme or custom CSS. Do not modify the theme's original style.css.

    Thanks I will definitely do that once I get this working.

    I added that code to the end of the style.css, and added the html to the post, but it's still showing the two paragraphs as being stacked on top of one another.

    Did I make a mistake with how I added the CSS to the style.css, perhaps?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, it looks like you have an error there - see the last one on this list for that stylesheet - there is an extra closing bracket above the styles you added:
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmyhousesforsaleindetroit.com%2Ftest%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

  5. agfreesafety
    Member
    Posted 1 year ago #

    I believe you're referring to line 2940 (right?).

    I removed that line, but it's still not working.

    Here's how the bottom of my style.css looks now:

    .wp-caption p.wp-caption-text {
        text-align: left;
    
    {
    #leftcolumn { width: 300px; border: 1px solid red; float: left}
    #rightcolumn { width: 300px; border: 1px solid red; float: right}
    }
    /* Begin Additional CSS Styles */
    
    /* End Additional CSS Styles */

    Do you see what's wrong?

    I ran the page checker again, and it says the following:

    Parse Error ; { #leftcolumn { width: 300px; border: 1px solid red; float: left} #rightcolumn { width: 300px; border: 1px solid red; float: right} }

    I'm not sure what exactly that means.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This bracket is backwards:

    {
    #leftcolumn

    sorry, I got that wrong above - not an extra but a wrong bracket - it should be a closing bracket }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags