New Thread
Advanced Reply
Hi how do I combine these 2 divs into one horizontal div?
Code:
<div>My content 1</div>
<div>My content 2</div>Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.
Thread:
Two divs side by side
6
85
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.
CSS
You can also just wrap the two in a container. Like so
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.
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.
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
24
To properly align divs you need css! But this will do the trick.
Just replace div dimensions!
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!
6
24
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
Container
These below need an external .css file.
CSS
Container
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>
6
24
Paste this code into notepad and save as div.css
Make sure it is in the same directory as your webpage!
Paste this code into notepad and save as container.css
Make sure it is in the same directory as your webpage!
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;
}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;
}
6
24
No problem thank Chod for the code 
85
Correct syntax for calling an external CSS file.
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.
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.
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
24
Sorry it should be:Code:
<link type="text/css" rel="stylesheet" href="div.css" />
<link type="text/css" rel="stylesheet" href="container.css" />
85
You should just edit your initial post with this info instead of adding another post to thread. Keeps it cleaner that way.
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
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
www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
User(s) browsing this thread: 1 Guest(s)
