Like this for example, http://www.oprah.com/style/How-to-Do-Your-Makeup-For-a-Night-Out .

I've been googling how-to's for over an hour now and I get slideshow apps that look more like photo albums with effects. Please help! I am more of a web writer than a web programmer but I can learn.

This will be a good addition to my portfolio as a social media content writer. Thanks in advance.

  • So what all do you want exactly? You don't necessarily want a slideshow with effects, right? Do you just want to have a paragraph of text that takes up only the right half of the slide? Michael Martin-Smucker over 8 years ago

2 answers

0
points

As a general tip, you can see exactly how a website does something by right-clicking and choosing "Inspect Element" (Chrome, Safari, Opera), or by installing Firebug in Firefox, or by pressing F12 in Internet Explorer 8+. All of these options will let you browse through an organized version of the code and see all of the CSS styles associated with any given element.

More specifically, though, if you're just trying to get a paragraph of text that only takes up the right half of your box, there are several ways you could go about it.

Floating and Clearing

Probably the most common way to do this is to set up a container box, and inside of it, float two boxes to the left (or one to the left and one to the right) so that they stack up side-by-side. To do this, you'll need to explicitly set their width. For example, the HTML would look like this:

<div id="container">
    <div id="left"></div>
    <p id="right"></p>
</div>

The CSS is pretty simle as well:

#container {
    width: 300px;
}
#left {
    float: left;
    width: 100px;
}
#right {
    float: left;
    width: 180px;
}

Because the total width of #left + #right is less than the container, these two objects will sit side-by-side (instead of one on top of the other as block-level elements usually do). There are a couple things to watch out for with this, though.

  • First of all, you might need to either add content inside of #left or give it a minimum height if you want this to work.
  • Second, if you want #container to have a border or background color that wraps around the two child elements, you'll need to use a clearfix, which generally requires either inserting empty html elements or using ugly CSS hacks.
  • Finally, if you set a separate background color for #left and #right, you'll also notice that these two columns won't have the same height.

Margin and an Absolute Div

This option only works if you know for a fact that one column will always be longer than the other. Being certain of this is even more difficult when you consider the fact that users can resize their browser or change the size of the font, etc. Using the same html as in the previous example, we can set up the CSS a little differently:

#container {
    position: relative;
}
#left {
    bottom: 0;
    left: 0;
    top: 0;
    position: absolute;
    width: 100px;
}
#right {
    margin-left: 105px;
}

This avoids the annoying clearfix issue from the first example, and it lets you have columns of equal height, but again, it only works if you're sure that the column set to position: absolute will always be shorter than the other column.

To see this last example in action: http://jsfiddle.net/cynnP/ The w3schools website also has some resources that might be helpful. Specifically, you'll probably want to read about floating, clearing, and positioning.

If this didn't answer your question, or if you have more questions, feel free to ask!

Answered over 8 years ago by Michael Martin-Smucker
JT3302 0
0
points

Thank you Michael. I just downloaded firebug. I just thought there was just a drop-and-drag app for this that I just didn't know of. Been postponing learning CSS but I guess I have to so I can publish better content.

Answered over 8 years ago by JT3302