• 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

    • You can now format text in Windows 11's Notepad

      By matthiew · Posted

      For anyone looking for a lightweight formatting-free text editor, I recommend Notepad3.
    • Sony unveils its first fight stick 'Project Defiant', supports PC and PS5

      By +sphbecker · Posted

      This looks really dumb, especially if it costs $100+. Noone who cares about using a flight yoke would touch that thing, people who don't care are probably fine using the analog sticks on their controller, so who is it for?
    • Google confirms more ads on your paid YouTube Premium Lite soon

      By +sphbecker · Posted

      A) "they shouldn't be making money off of those [free videos]"?? That is literally their business model, making money off videos that users post...if you don't feel like that should be allowed, then are you saying YouTube shouldn't exist. B) Yes, the example I gave is a net-negative transaction. If YouTube makes money from others who are following their rules, it doesn't change the fact that the person using an ad-blocker is costing them money. C) YouTube has always operated at a loss...kind of invalidates your entire argument. As I always say, I don't care what you do, I will not even say you are wrong for doing it. That is purely your choice. Just be honest enough to say something like "Google is rich, I honestly don't care." Perfectly fine reason. Don't act like there is some imagined justification for why it isn't breaking the rules.
    • You can now present content from your camera feed in Google Meet

      By David Uzondu · Posted

      You can now present content from your camera feed in Google Meet by David Uzondu Google has a new feature rolling out for Google Meet that lets you directly present video from an external camera feed right into your meetings. This means if you have a document camera for showing physical papers, a dedicated external camera for a better angle, or even output from a video production tool, you can now pipe that into Meet as a presentation source. This new option supports video up to 1080p at 30FPS. This "present from camera" function offers a more integrated way to handle certain video inputs compared to some existing workarounds. For instance, it might prove less complicated than a setup with OBS Studio where you arrange your various video sources into scenes, activate the virtual camera output, and then navigate Google Meet's settings to specifically choose "OBS Virtual Camera" as your video input before you can even start presenting that customized feed. Alongside this camera presentation feature, Google's announcement also mentioned several improvements to the general screen sharing experience in Meet. Initiating any type of screen share is faster now, and video quality during screen sharing has also been sharpened, with better handling of dynamic content like scrolling text or embedded videos. To reduce interruptions, if a second presenter stops sharing their screen, any previous presentation will now automatically resume. For those wondering when they can get their hands on this, the rollout for the camera presentation feature and these screen sharing enhancements has begun for Rapid Release domains. Users on Scheduled Release domains will start seeing it from June 11, 2025. Google notes that it could take up to 15 days for these features to be visible to all eligible users. Most Google Workspace accounts, including Business Standard and Plus, various Enterprise and Education tiers, and Workspace Individual subscribers, will have access. This new presentation option joins other recent Google Workspace enhancements. For instance, Gemini in Google Drive can now summarize changes to your files, offering a quick way to get updated on what you missed in documents since you last opened them.
    • Is Samsung teasing a Galaxy Z Fold7 Ultra? An official press release suggests so

      By Travesty · Posted

      I'll keep waiting for this day

  • Recent Achievements

    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      379
    2. 2
      +FloatingFatMan
      175
    3. 3
      ATLien_0
      169
    4. 4
      snowy owl
      169
    5. 5
      Xenon
      133
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!