csosa
February 7, 2015, 12:56am
1
Hi im trying to put two divs side by side and inline with one another. ive used the float and display properties but it seems not to be working appropriately. im trying to move the divs "sitemaplist" and "sitemaplist2" side by side.
<html>
<head>
<title></title>
</head>
<body>
<div id="wrap">
<div id="sitemaplist">
<div id="box_title"><h2 id="sitemap_title">Sitemap</h2></div>
<ul class="pages" style="list-style:none;">
<h4 class="pagehead">Pages</h4>
<li><a href="/default.aspx">Home</a></li>
<li><a href="/ABOUTUS.aspx">About Us</a></li>
<li><a href="/Products.aspx">Products</a>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Impact Indicators</h5>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
</ul>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Impact Recorders</h5>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Tilt Indicator</h5>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
</ul>
</li>
<li><a href="/CONTACT2.aspx">Contact Us</a></li>
</ul>
</div>
<div id="sitemaplist2">
<ul class="pages" style="list-style:none;">
<h4 class="pagehead">Products</h4>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
</div>
</div>
</body>
</html>
.pages a{
font-family: "open sans", sans-serif;
color:black;
font-size:10pt;
}
.pages2 a{
font-family: "open sans", sans-serif;
color:black;
font-size:10pt;
}
.pages a:hover {
color:red;
}
.pagehead{
font-family: "open sans", sans-serif;
font-weight:bold;
}
#sitemap_title{
font-family: "open sans", sans-serif;
font-weight:bold;
color:white;
margin-left:10px;
}
#box_title{
background-color:#385285;
width:974px;
}
.pagehead{
margin-top:0px;
margin-bottom:0px;
}
#wrap{width:974px;}
#sitemaplist{
width:240px;
}
#sitemaplist2{
float:right;
width:240px;
}
You have the right idea but if you want two items next to each other floated, the FIRST one AT THE MINIMUM must be floated. The second is optional based on what kidn of behavior you want.
That means that the first sitemaplist div must be floated (the one with 240px width.)
csosa
February 7, 2015, 1:15am
3
So I have them both floated and I get this: I know you said I didnt have to float the second but I had two or else it doesnt work…
#sitemaplist{
float:left;
width:240px;
}
#sitemaplist2{
float:left;
width:240px;
}
if there is another method to do this I dont have to use float…
Please give us a live site. I’m on a chromebook and it’s a pain to get a local setup of your code. All threads you make; please ensure we have a copy test page online (if possible.)
csosa
February 7, 2015, 1:32am
6
ralphm
February 7, 2015, 1:46am
8
If you don’t want to float one of the divs, just give it a left or right margin wide enough to make room for the floated div (which needs to have a width set to make sure this works properly). Also make sure to put the floated div first in the markup.
PaulOB
February 7, 2015, 9:46am
9
Hi,
You have sitemaplist at 240px width yet inside it you have your title which you have set at 974px wide! How is that supposed to fit?
Anything that sticks out will be ignored as far as the browser is concerned.
Your title should come first and then followed by those sitemap divs and then they won’t stack on top of the blue title bar.
If you use display;table-cell (IE8+) then you won’t need floats or widths but will need an extra wrapper.
Here is the amended code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.pages a {
font-family: "open sans", sans-serif;
color:black;
font-size:10pt;
}
.pages2 a {
font-family: "open sans", sans-serif;
color:black;
font-size:10pt;
}
.pages a:hover {
color:red;
}
.pagehead {
font-family: "open sans", sans-serif;
font-weight:bold;
}
#sitemap_title {
font-family: "open sans", sans-serif;
font-weight:bold;
color:white;
margin-left:10px;
}
#box_title {
background-color:#385285;
}
.pagehead {
margin-top:0px;
margin-bottom:0px;
}
#wrap {
width:974px;
margin:auto;
}
.sitemap-wrap {
width:100%;
display:table
}
#sitemaplist, #sitemaplist2 {
display:table-cell;
vertical-align:top;
paddding:0 25px 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box_title">
<h2 id="sitemap_title">Sitemap</h2>
</div>
<div class="sitemap-wrap">
<div id="sitemaplist">
<ul class="pages" style="list-style:none;">
<h4 class="pagehead">Pages</h4>
<li><a href="/default.aspx">Home</a></li>
<li><a href="/ABOUTUS.aspx">About Us</a></li>
<li><a href="/Products.aspx">Products</a>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Impact Indicators</h5>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
</ul>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Impact Recorders</h5>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
<ul class="pages" style="list-style:none;">
<h5 class="pagehead">Tilt Indicator</h5>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
</ul>
</li>
<li><a href="/CONTACT2.aspx">Contact Us</a></li>
</ul>
</div>
<div id="sitemaplist2">
<ul class="pages" style="list-style:none;">
<h4 class="pagehead">Products</h4>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
</div>
</div>
<!-- end sitemap-wrap -->
</div>
<!-- end wrap -->
</body>
</html>
If you want the 2 sitemap elements closer together then just omit the width from .sitemap-wrap.
I avoid floating these days as display:table-cell is much more robust and you don’t need to force widths on everything (unless of course you want fixed widths).
csosa
February 9, 2015, 4:35pm
10
csosa
February 9, 2015, 4:47pm
11
sorry but what exactly did you do to it to make it work?
It’s been a few days but IIRC, I took the blue header out of your left/right side-by-side elements and placed it as a header to those.
Then I added overflow:hidden (a clearing mechanism) to #wrap . This step wasn’t neccessary but I did it.
I’d have to look at the original codepen (you updated it, it seems) to recreate my steps. Going off memory. I think that was it?
csosa
February 9, 2015, 4:57pm
13
oh I see I didnt notice it was in my DIV thanks…
system
May 12, 2015, 12:05am
14
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
