• 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

    • Microsoft's new AI tools: What "Researcher" and "Analyst" mean for your work

      By zikalify · Posted

      Microsoft's new AI tools: What "Researcher" and "Analyst" mean for your work by Paul Hill Microsoft has announced the general availability of two new reasoning AI agents called Researcher and Analyst. Both were previously available for Microsoft 365 Copilot Frontier members, but now they’re available for all Microsoft 365 Copilot license holders. Researcher is capable of multi-step research by combining OpenAI’s deep research model with Microsoft 365 Copilot’s orchestration and deep search capabilities. The Analyst agent can think like a data scientist, giving you insights in minutes from raw data. Analyst is built on OpenAI’s o3-mini. Microsoft says it can run Python to tackle the most complex data queries and you can view the code it’s running to verify its work in real time. Who it affects, and how While Frontier members have had access to these agents since April, they’ve only just been announced for general availability. The Copilot in question is not Microsoft’s free Copilot either, but the Copilot that comes as part of Microsoft 365 and includes additional features. To access it, you will have to pay for a $30 per month paid yearly subscription. Existing customers should now have access to both of these agents. While there is certainly angst in the world about the influence of AI on our jobs, Microsoft still maintains that it’s an assistant tool. These two new agents look set to benefit professionals across a range of roles including researchers and strategists, data analysts and scientists, sales and marketing teams, and anyone who just wants to summarize or synthesize information fast. The Researcher agent is helpful for gathering insights, preparing for negotiations, and assessing impacts such as the impact of tariffs on businesses. Meanwhile the Analyst agent can be used to convert raw data into actionable insights, identifying customer behaviors, and visualizing trends. It’s not all good news, Microsoft does have some limitations in place to ensure reliability of its service for all customers. The Redmond giant explains that the pre-pinned agents can run up to 25 combined queries per month - so that’s not 25 queries per agent, it’s for both together, each month. Additionally, Researcher supports 37 languages, but Analyst only supports eight, with more coming soon. Why it's happening Agents have been all the rage since the end of 2024 when figures in big tech declared that 2025 would be the year of agentic AI. Agents are capable of multi-step work and bring us closer to the goal of artificial general intelligence (AGI). These agents that Microsoft has unveiled are possible now thanks to the development of OpenAI’s deep research model and o3-mini, which also reasons. Earlier this year, Microsoft declared that it wanted to empower employees everywhere with AI agents and the release of Researcher and Analyst goes a long way in doing this. They will be beneficial for employees in many different fields and have the potential to free up a lot of time for more beneficial work. Customers in the Frontier program, Microsoft said, found these new tools to be highly effective for complex analytical work. This is great for Microsoft financially because it shows clear demand for such tools, justifying AI’s upfront development costs. These agents also help Microsoft keep up against the competition, which is also aggressively pursuing agents. What to watch for Microsoft said that its Researcher agent is much more accurate than everything that came before, thanks to the time it spends thinking about its answer. However, AI does still possess the ability, just like humans, to make mistakes. Verifying the creations of these agents is still crucial when it comes to anything mission critical. The Analyst agent’s ability to let the user see the steps and which Python code it executes is very good for transparency and can help combat errors if things ever start to go wrong with the agent’s reasoning. This could help to build trust among customers who need to use the Analyst agent and could set Microsoft’s offering apart from the competition, giving it an edge. Another thing customers should be aware of is the prompt they use matters. Microsoft tries to guide customers along with sample prompts but to get the most from these tools, users will need to know how to create effective and precise prompts. The good thing is that these bots are spoken with natural language, so it’s just a matter of being articulate and precise when you give a prompt. It will certainly be interesting to see how agents like these continue to affect employees’ job security in the future. While AI can certainly be helpful, if it develops to a point where an employer can effectively hire AI for a low cost to do the same work, then it could lead to massive displacement, with not enough new jobs for people to move into. This point has recently been elucidated by Anthropic’s CEO Dario Amodei. Source: Microsoft
    • Politically funny images of the World

      By Michael Scrip · Posted

    • Microsoft and Crowdstrike announce partnership on threat actor naming

      By +Eternal Tempest · Posted

      I'm wondering if they are doing this as a "backup" in case CISA ceases to exist. It almost did recently due to funding and it's future is shaky. CISA - https://www.cisa.gov/known-exploited-vulnerabilities-catalog Example "CVE-2023-39780" https://www.cve.org/CVERecord?id=CVE-2023-39780 ASUS RT-AX55 Routers OS Command Injection Vulnerability
    • Microsoft will finally stop shoving Edge down your throat, on one condition

      By David Uzondu · Posted

      Over regulation is bad. That's why the EU is behind the US. But, it's a good thing the EU stepped in, in this case.
    • Microsoft will finally stop shoving Edge down your throat, on one condition

      By David Uzondu · Posted

      Yep

  • Recent Achievements

    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      172
    2. 2
      ATLien_0
      125
    3. 3
      snowy owl
      123
    4. 4
      Xenon
      118
    5. 5
      +Edouard
      92
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!