Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.

Thread: 

Two divs side by side

Ads
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#1
Senior Member
Hi how do I combine these 2 divs into one horizontal div?

Code:
<div>My content 1</div>
<div>My content 2</div>
chod Offline referral

Posts: 860
Joined: Jul 2013
Reputation: 85

#2
Posting Freak
Use CSS for the cleanest method.

Such as like this. Other methods are possible but this will be the most compliant solution and easiest to work on in the future.

This is not fully tested but should get you on track.
Code:
<div class="item_one">My_Content_1</div>
<div class="item_two">My_Content_2</div>

CSS
Code:
.item_one
{
    padding:5px 10px 5px 10px;
    border:1px black solid;
    border-bottom:1px white solid;
    background-color:white;
    float:left;
    position:relative;
    top:-1px;
    z-index:1;
}
.item_two
{
    padding:5px 10px 5px 10px;
    border:1px black solid;
    float:left;
    background-color:white;
}

You can also just wrap the two in a container. Like so
Code:
#container
{
    padding:5px 10px 5px 10px;
    border:1px black solid;
    /*border-bottom:1px white solid;*/
    float:left;
    background-color:white;
    position:absolute;
    z-index:1;
}

<div id="container">
    <div class="item_one">My Content 1</div>
    <div class="item_two">My Content 2</div>
</div>


If you would have actually pasted all the relevant code I could have give you a better example using your actual work flow.

Lastly please make sure you research why the first recommended way is the currently more compliant way to go about it.
www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#3
Posting Freak
To properly align divs you need css! But this will do the trick.

Code:
<div style="width:400px;">
<div style="float:left; width:200px;">My content</div>
<div style="float:right; width:200px;">My content</div>
</div>

Just replace div dimensions! 001_wink
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#4
Senior Member
Thanks guys very much. Chod how do I add your code to my page? I mean where do I put CSS code?
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#5
Posting Freak
You can add <style type="text/css">your CSS</style> to your header or you can create a separate .css file and link it to your webpage!

Posted by Chod:

CSS
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Title</title>
<style type="text/css">
.item_one
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     border-bottom:1px white solid;
     background-color:white;
     float:left;
     position:relative;
     top:-1px;
     z-index:1;
}
.item_two
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     float:left;
     background-color:white;
}
</style>
</head>

<body>
<div class="item_one">My_Content_1</div>
<div class="item_two">My_Content_2</div>
</body>
</html>

Container
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Title</title>
<style type="text/css">
#container
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     /*border-bottom:1px white solid;*/
     float:left;
     background-color:white;
     position:absolute;
     z-index:1;
}
</style>
</head>

<body>
<div id="container">
     <div class="item_one">My Content 1</div>
     <div class="item_two">My Content 2</div>
</div>
</body>
</html>

These below need an external .css file.

CSS
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Title</title>
<link type="text/css" rel="stylesheet"div.css" />
</head>

<body>
<div class="item_one">My_Content_1</div>
<div class="item_two">My_Content_2</div>
</body>
</html>

Container
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Title</title>
<link type="text/css" rel="stylesheet"container.css" />
</head>

<body>
<div id="container">
     <div class="item_one">My Content 1</div>
     <div class="item_two">My Content 2</div>
</div>
</body>
</html>


001_glare
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#6
Senior Member
How do I create these:
<link type="text/css" rel="stylesheet"container.css" />
<link type="text/css" rel="stylesheet"div.css" />
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#7
Posting Freak
Paste this code into notepad and save as div.css
Code:
.item_one
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     border-bottom:1px white solid;
     background-color:white;
     float:left;
     position:relative;
     top:-1px;
     z-index:1;
}
.item_two
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     float:left;
     background-color:white;
}
Make sure it is in the same directory as your webpage!

Paste this code into notepad and save as container.css
Code:
#container
{
     padding:5px 10px 5px 10px;
     border:1px black solid;
     /*border-bottom:1px white solid;*/
     float:left;
     background-color:white;
     position:absolute;
     z-index:1;
}
Make sure it is in the same directory as your webpage!
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#8
Senior Member
Thanks guys very much!
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#9
Posting Freak
No problem thank Chod for the code Wink
chod Offline referral

Posts: 860
Joined: Jul 2013
Reputation: 85

#10
Posting Freak
Correct syntax for calling an external CSS file.

Code:
<head>
<link rel="stylesheet" type="text/css" href="div.css">
</head>[/code

[code]<head>
<link rel="stylesheet" type="text/css" href="container.css">
</head>

Only use one. Not both. Please understand what this is doing and why it is being done this way so you can properly understand. Copying and pasting code willie nillie will just get you in trouble and you will never learn anything from it.

But still the best way to have answered this would have been if we could see your actual code. It seems like your page is pretty piece meal at this point.
www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#11
Posting Freak
001_cursing Sorry it should be:
Code:
<link type="text/css" rel="stylesheet" href="div.css" />
<link type="text/css" rel="stylesheet" href="container.css" />
001_scared
chod Offline referral

Posts: 860
Joined: Jul 2013
Reputation: 85

#12
Posting Freak
You should just edit your initial post with this info instead of adding another post to thread. Keeps it cleaner that way. Wink
Also if you look at my example in regards to your post. You will see there is still a slight difference. While both will work. Mine is considered to more the more "correct" syntax layout to use.

Stay current with your coding syntax and your code will be much more solid and easier for others to read and understand Smile
www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.





User(s) browsing this thread: 1 Guest(s)