css - Make two <section> tags side by side

Question

My current code is this:

<section><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

My assignment requires me to use the section tag on both the iframe and the textarea, but I need them to line up side by side. When I take they section tags away, they line up perfectly, but I need to keep the section tags. How do I get this to line up like 2 columns but still keep the tags?

Answer 1

Use CSS styles with css selectors and look at float.

Quick and dirty fix:

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

Answer 2

<section style="display:block;float:left; width:675px;">
     <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe>
</section>
<section style="display:block;float:left; width:200px;">
     <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea>
</section>

Answer 3

I'm beginning to lean away from floats and towards inline-block

HTML

<section class="left">
   <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe>    
 </section>
 <section class="right">
    <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea>    
 </section>

CSS

.left
{
    display:inline-block;
    width:675px;
}


.right
{
    display:inline-block;
    width:200px;
} 

Example: http://jsfiddle.net/nV8ag/

Inline-block does have a few caveats though: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 4

You should always put styles in an external stylesheet.

Then you could place this code into your HTML:

<section id="section-1"><iframe width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section id="section-2"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

And have something like this in your CSS file:

section {display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
#section-1 {width:680px; height:400px;} These are the ID's of your sections
#section-2 {width:200px; height:480px;}

Also if you are learning to use HTML5 elements you should make sure that you include the HTML5 shiv for older browsers.

Just pop this into the head tags of the HTML document.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 5

Just set width of both sections and set float left for both as:

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380"           src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>