Box Side-by-Side

RandomRyan

RandomRyan

Member
Nov 7, 2013
37
4
Hey.

I'm having a bit troubles with coding.

How do I put a box beside a blog roll. I tired to using a table with two columns, but its not centering it.

I hope that makes sense. :S

Here's the code:
You must be registered for see links


Thanks.
 
Sort by date Sort by votes
G

GarettM

Posting Freak
Aug 5, 2010
833
136
Change your HTML Markup for starters :/
try Something like this
HTML: 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Markup Example</title>
        <meta name="description" content="Site Description">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="logo"></div>
               
                <ul id="menu">
                    <li class="item"><a href='#'>Home</a></li>
                    <li class="item"><a href='#'>Shop</a></li>
                    <li class="item brand">
                        <a href="#">
                            <img src="img/logo-small.png" style="border:0" />
                        </a>
                    </li>
                </ul>
            </div>
            <div id="container">
                <div class="advirtisement"><!-- blank.fw.png --></div>
                <div id="news">
                    <?php echo $siteName(); ?>
                    <ul class="news_container">
                        Float Right width 65%; ?
                        <?php
                            echo $site->getNews();
                        ?>
                    </ul>
                </div>
                <aside class="sidebar">
                    Float To Right 25%; ?
                </aside>
            </div>
            <footer class="footer">
                <p>Copyright &copy; 2013 SiteName;</p>
            </footer>
        </div>
    </body>
</html>
 
Upvote 0 Downvote
M

Mega

Posting Freak
Mar 23, 2013
858
155
Normally what i did was,
Situations:
In CSS,
Code: 
.holder { (holds the div's together);
width: 220px;
margin: auto; (if you want it to be center both of it)

#left_box {
background: #000 (color);
width: 100px;
height: 100px;
margin-right: 10px; (if you want space between the rightbox)
float: left;
}

#right_box {
background: #000 (color);
width: 100px;
height: 100px;
float: right;
}

In HTML,
HTML: 
<html>
<body>
<div class="holder">
<div id="left_box"></div>
<div id="right_box"></div>
</div>
</body>
</html>
Hope this will help.
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
This is probably one of the most common CSS issues, some of the solutions work but they're pretty long winded and use ID's (#) which shouldn't be used in CSS - save them for Javascript.

Here's what I tend to use, you may call it lazy but it's responsive and pre-made+ it's available for a whole variety of content (all the way up to 9 boxes in-line).
The Responsive Grid System (
You must be registered for see links
) is easy to use and allows you have content inline, whilst being responsive as well. Need help, then just ask but it's fairly simple to integrate in to your designs. Hope it helps.
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top