• 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

    • Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered

      By +Eternal Tempest · Posted

      Seem like they are seeking for a one size fits all. You have power users and "what's a computer" generation growing up on phones, tablets, and Chromebooks.
    • Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered

      By +Eternal Tempest · Posted

      Guessing it was profitable enough inserting prompted apps vs the hate it generated.
    • Steam overlay's FPS counter gets major upgrade to show CPU and VRAM usage, temps, and more

      By Thiefyo · Posted

      Also good for Debugging or troubleshooting your game.. i dont get it why nvidia app or amd does not show this data.. if steam can do it..
    • Facebook's mobile app is finally getting support for passkeys

      By Thiefyo · Posted

      i have it since 3rd june
    • Microsoft reportedly planning to lay off thousands of employees, mostly in sales

      By Usama Jawad96 · Posted

      Microsoft reportedly planning to lay off thousands of employees, mostly in sales by Usama Jawad Back in May 2025, Microsoft decided to lay off 3% of its workforce, which amounted to roughly 6,000 employees. It claimed that this decision allowed it to implement better organizational changes in a "dynamic marketplace". Now, a new report claims that the Redmond tech firm is planning to lay off thousands more next month. Citing unnamed sources, Bloomberg reports that as the company continues investing heavily in its AI ventures, it is about to announce layoffs of thousands of workers as early as next month. This reduction in workforce will primarily affect sales teams, but they won't be the only ones affected. That said, the sources did mention that the timing for this announcement may change. This move, if true, won't be entirely surprising. In April 2025, Microsoft announced that it will be relying more on third-party firms to sell its software to small- and medium-sized customers. It's currently unclear how many employees will be impacted by this change, but even if the layoff percentage is in the single digits, it would still be significant as it would be impacting the professional careers of thousands. The May 2025 layoffs primarily impacted engineering and product teams. The other major round of layoffs prior to this was the decision to eliminate 10,000 jobs back in January 2023. Those represented 5% of the total workforce at that time, with numerous teams, including the one leading Mixed Reality (MR) efforts, being heavily impacted. It is interesting to note that if the timing of the announcement for layoffs is accurate, it would be soon after Microsoft closes its fiscal year at the end of June 2025. Although we'll get financial reports for the latest quarter soon after too, one has to wonder what the human cost of profit is, as Microsoft continues to report billions of dollars in revenue every quarter. Source: Bloomberg (paywall)

  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      704
    2. 2
      ATLien_0
      285
    3. 3
      Michael Scrip
      213
    4. 4
      +FloatingFatMan
      194
    5. 5
      Steven P.
      131
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!