• 0

CSS: Keeping a set width between boxes

Asked by JMann,

 Share

Question

Grand Master

JMann Veteran

Posted
  • Veteran
Posted

Hi everyone,

I need what I would of thought to be a quick hand, first let me direct you to this page: Flanking Menu's. Now if you re-size your browser window you will see that the 3 main content boxes in the centre all stay at set height away from each other and the boxes never overflow each other.

Now I am looking at the CSS for that page, and I have a simular layout for the new NeoRequest site and at the moment the main Introduction box overlaps the news box if you browser is under 1024 resolution or the window is resized (screenshot attached) in the CSS on that Flanking menu's page what is the CSS that makes that constant gap between the boxes happen? Because this is what I am failing on at the moment, if you can help.

What I believe to the the offending CSS Code:

#introbox {
	width:98%;
	min-width:1024px;
	background-color:#ECF1FF;
	border:1px solid #C6C6C6;
	padding:4px;
	line-height:1.2;
	position:relative;
	left:5px;
	top:165px;
}
#news {
	width:48%;
	position:absolute;
	top:325px;
	left:5px;
	background-color:#ECF1FF;
	border:1px solid #C6C6C6;
	padding:4px;
}

Thanks,

JMann

post-28082-1137162235.gif

11 answers to this question

Recommended Posts

  • 0
Grand Master

JMann Veteran

Posted
  • Author
  • Veteran
Posted (edited)

Ok, thanks I knew it would be pretty simple. One last problem, and I need to find the best way to do this I so I thought you lot would be the best lot to ask.

Underneath the main Introduction box, I have 2 boxes both taking up 1/2 of the web page and once again I need that little gap in the middle to stay the same when the page gets smaller. So basically how can I make 2 boxes both take up 50% of a web page, and get smaller/bigger when the webpage does and have a little middle gap between them. Just drew a quick picture. :)

post-28082-1137163869_thumb.jpg

Edited by JMann
  • 0
Grand Master

lnmnky

Posted
Posted
  JMann said:

Ok, thanks I knew it would be pretty simple. One last problem, and I need to find the best way to do this I so I thought you lot would be the best lot to ask.

Underneath the main Introduction box, I have 2 boxes both taking up 1/2 of the web page and once again I need that little gap in the middle to stay the same when the page gets smaller. So basically how can I make 2 boxes both take up 50% of a web page, and get smaller/bigger when the webpage does and have a little middle gap between them. I can draw a sample picture if needed...sorry if its hard to understand. :)

Actually, did you mean 50% of the height? Here's the width one....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>;
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<style>
#content{
	width : 50%;
	border : 1px solid tomato;
	margin-bottom : 5px;
	padding : 5px;
}
#news{
	width : 50%;
	border : 1px solid olive;
	padding : 5px;
}
</style>
</head>
<body>

<div id="content">

blah blah

</div>

<div id="news">

blah blah

</div>

</body>
</html>

for height ....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>;
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<style>
#content{
	width : 50%;
	height : 49%;
	border : 1px solid tomato;
	margin-bottom : 5px;
	padding : 5px;
}
#news{
	width : 50%;
	height : 49%;
	border : 1px solid olive;
	padding : 5px;
}
</style>
</head>
<body>

<div id="content">

blah blah

</div>

<div id="news">

blah blah

</div>

</body>
</html>

cheat and use 49% each.

  • 0
Grand Master

lnmnky

Posted
Posted

Float : left; on both, or display : inline; on both..

I have some demos, or I'll build one and edit this post.

with % as widths it tricky to get them to add up to 100% when you have margins set. (the margins are and addition to the width so you get scrolling.

but anyway it's fairly close, but could be better. I'll have a think.

I might be able to do something with absolute positioning, but then the margin might not always be fixed. The right hand box would be fixed at the far right corner correctly though

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>;
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<style>
#content{
	width : 49%;
	height : 49%;
	border : 1px solid tomato;
	margin-right : 5px;
	padding : 5px;
	float : left;
}
#news{
	width : 49%;
	height : 49%;
	border : 1px solid olive;
	padding : 5px;
	float : left;
}
</style>
</head>
<body>

<div id="content">

blah blah

</div>

<div id="news">

blah blah

</div>

</body>
</html>

I'll make a copy and show the other version.

  • 0
Grand Master

JMann Veteran

Posted
  • Author
  • Veteran
Posted

Ok it works, but not perfectly this is the current problem: They are both spread across the page 1/2 and 1/2 but I need the to be at a shorter width, but if I change the width from 49% second "news" one disappears. Any idea's? I also changed the float on the Right one, to float:right; Just incase that is important somewhat.

  • 0
Grand Master

lnmnky

Posted
Posted

Both set to 40%, both float:left;

works on IE and FF fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>;
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<style>
body{
	margin : 0px;
	margin-top : 5px;
}
#content{
	width : 40%;
	height : 49%;
	border : 1px solid tomato;
	margin-left : 5px;
	margin-right : 5px;
	padding : 5px;
	float : left;
}
#news{
	width : 40%;
	height : 49%;
	border : 1px solid olive;
	padding : 5px;
	float : left;
}
</style>
</head>
<body>

<div id="content">

blah blah

</div>

<div id="news">

blah blah

</div>

</body>
</html>

I've made a perfect 50% one, probably not what you want now.

I've cheated, as the DIVs come out in the wrong order to what they are displayed..

Dang, FF doesn't like it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>;
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<style>
body{
	margin : 0px;
	margin-top : 5px;
	margin-left : 5px;
	margin-right : 5px;
}
#content{
	width : 50%;
	height : 49%;
	border : 1px solid tomato;
	padding : 5px;
	float : right;
}
#news{
	width : 100%;
	height : 49%;
	border : 1px solid olive;
	padding : 5px;
	margin-right : 5px;
}
</style>
</head>
<body>

<div id="content">

blah blah

</div>

<div id="news">

blah blah

</div>

</body>
</html>

post-29476-1137166425_thumb.jpg

  • 0
Grand Master

JMann Veteran

Posted
  • Author
  • Veteran
Posted

Ok, now im getting a little confused. I have one working, this is the code I have at the moment, but upon increase in size, and getting it to align with the other boxes they start to muck up because they don't like being the same size. Confusing stuff.

#news{
	width : 45%;
	height : 49%;
	border : 1px solid tomato;
	margin-top:320px;
	margin-left : 5px;
	margin-right : 5px;
	padding : 5px;
	float : left;
}
#recentwork{
	width : 45%;
	height : 49%;
	border : 1px solid olive;
	margin-top:320px;
	padding : 5px;
	float : left;
}

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • This 2TB NVMe Gen4 SSD is priced just $94 and you also get a free 64GB UHS-I memory card

      By hellowalkman · Posted

      This 2TB NVMe Gen4 SSD is priced just $94 and you also get a free 64GB UHS-I memory card by Sayan Sen A few days ago, we reported on Team Group's T-FORCE G50 4TB NVMe SSD that was up for grabs at just $200 thanks to a promo coupon. Sadly, that deal has expired although you can still WD's SN8100 (Gen5) and SN7100 (Gen4) offerings as they are still running the discount. If you don't have the budget for those or are shopping for lower capacity drives then Crucial's T500 Gen4 drive discount is still live, and you can get them for just $125. And while the G50 4TB deal has expired, Team Group is now offering its 2TB model at its lowest ever price and you also get a free Micro SD card with it. The Team Group G50 is also a TLC (triple level cell) NAND flash SSD, and thus the endurance on the T-FORCE SSD is quite good, as it is rated for 1300 TBW (terabytes written) for the 2TB variant. Its MTBF, or Mean Time Between Failure, is claimed at 3,000,000 hours. The operating temperature is 0~70 C. The G50 does not have a dedicated DRAM cache (only the G50 Pro SKUs have it), but since it is based on NVMe version 1.4 which supports HMB (host memory buffer) technology; thus, the drive can use system memory for caching. In terms of performance, Team Group promises sequential read and write speeds of up to 5000 MB/s and 4500 MB/s, respectively. However, the firm does not disclose random throughput metrics. Get the Team Group G50 at the link below (deal is said to be ending in less than 10 hours): Team Group T-FORCE G50 SSD (TM8FFE002T0C129) + Team Group 64GB Elite microSDXC UHS-I U3, V30, A1, Micro SD with SD Adapter, to 100MB/s (TEAUSDX64GIV30A103): $105.99 + $12 off with promo code SSETA665 (Shipped and Sold by Newegg US) This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • Microsoft announces multi-year partnership with AMD for future of Xbox consoles and hardware

      By Kushan · Posted

      I know what you're getting at, but Microsoft themselves have said that the Xbox Ally specifically disables a bunch of stuff from Windows to improve performance and save 2GB of memory. And that special game mode is coming to Windows 11 next year.
    • Microsoft can't help break Windows Outlook as even opening an email now sends it crashing

      By +Eternal Tempest · Posted

      It could be good old fashion neglect, lower priority focus, less resources then it use to vs active sabotage.
    • Microsoft accidentally replaced Windows 11 startup sound with one from Vista

      By +Peter Alexander London · Posted

      Then give it a try
    • Microsoft accidentally replaced Windows 11 startup sound with one from Vista

      By +Peter Alexander London · Posted

      Then give it a try

  • Recent Achievements

    • First Post
      Ian_ earned a badge
      First Post
    • Explorer
      JaviAl went up a rank
      Explorer
    • Reacting Well
      Cole Multipass earned a badge
      Reacting Well
    • Reacting Well
      JLP earned a badge
      Reacting Well
    • Week One Done
      Rhydderch earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      646
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      219
    4. 4
      +FloatingFatMan
      184
    5. 5
      Steven P.
      145
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!