Need help? Check out our Support site, then


Column spacings

  1. I would like to increase the spacing between each of the video's on my home page that I have currently set up using columns. I have put frames around each of the 3 videos to try & separate but I really don't like the way it looks. I would rather have much thinner frames, PLUS an empty space between each.

    I have use the following codes

    <div style="width: 400px; height: 225px; border: 4px solid #cd3828;">[youtube=http://www.youtube.com/watch?v=BERzLXwUlvc&w=400&h=225]</div>
     
    <div id="contentBox" style="margin: 0 auto; width: 100%;">
    <div id="column1" style="float: left; margin: 5px; width: 30%;">
    <h2><span style="color: #cf3828; font-size: 12pt;">The 12 Dangers to Eliminate</span></h2>
    <div style="width: 180px; height: 135px; border: 4px solid #cd3828;">[youtube=http://www.youtube.com/watch?v=H7c_0RucB5Y&w=180&h=135]</div>
    </div>
    <div id="column2" style="float: left; margin: 5px; width: 30%;">
    <h2><span style="color: #cf3828; font-size: 12pt;">The 10 Tools to Eliminate the Dangers</span></h2>
    <div style="width: 180px; height: 135px; border: 4px solid #cd3828;">[youtube=http://www.youtube.com/watch?v=XYvXxEP_ZyY&w=180&h=138]</div>
    </div>
    <div id="column3" style="float: left; margin: 5px; width: 30%;">
    <h2><span style="color: #cf3828; font-size: 12pt;">Welcome to The Advantage Group™</span></h2>
    <div style="width: 180px; height: 135px; border: 4px solid #cd3828;">[youtube=http://www.youtube.com/watch?v=QDJxwuJY9Mc&w=180&h=135]</div>
    </div>
    </div>

    I am very new & self-taught on CSS so please pardon my ignorance.

    TIA

    The blog I need help with is advantagegroup.me.

  2. Hi there, looking at your site, you currently have the video div within the h2 tag. End the h2 tag before the video div and then take perhaps 10px off the width of the video div (and set height to "auto" instead of a fixed value) and add a margin-right of the same amount (10px) or whatever value you desire. Do the same for the second video. The third will not need the margin, but you will want to reduce the width most likely by the same amount as the first two. Here is the code from your first video modified as I outlined above.

    <div style="float:left;margin:5px;width:30%;" id="column1">
    <h2><span style="color:#cf3828;font-size:12pt;">The 12 Dangers to Eliminate</span></h2>
    <div style="width:170px;height:auto;border:4px solid #cd3828; margin-right: 10px;"><span class="embed-youtube" style="text-align:center; display: block;"><iframe width="180" height="135" frameborder="0" class="youtube-player" type="text/html" src="http://www.youtube.com/embed/H7c_0RucB5Y?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent"></iframe></span></div>
    </div>

    Give the above a try and see what you think.

  3. this was exactly what I was after. Thank you very much :)

  4. You are most welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic