• 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

    • Court orders Apple to keep web links in the App Store, eroding its iOS payment monopoly

      By Fiza Ali · Posted

      Court orders Apple to keep web links in the App Store, eroding its iOS payment monopoly by Fiza Ali Apple has been ordered to continue permitting web links and external payment options in the App Store after its bid to halt court’s ruling was declined today by a higher court. Earlier this year, in April, a federal judge decreed that Apple must allow developers to include web links in their iOS apps, remove restrictions on link formatting, and enable external payment methods without taking a commission on transactions. Apple immediately appealed and sought an injunction to delay implementation of the order while the case progressed. However, the United States Court of Appeals has now refused Apple’s emergency request to stay the district court’s order. In its decision, the panel held that Apple had not demonstrated a sufficient likelihood of success on appeal, nor that it would suffer irreparable harm if the order were enforced. The court also considered potential prejudice to other parties and the public interest, concluding that an immediate suspension was not warranted. This ruling makes it much harder for Apple to overturn the April decision, which came from a lawsuit initiated by Epic Games. Epic first sued Apple’s App Store policies in 2020, claiming that the company’s restrictions harmed competition. While Epic did not prevail on every count, the court did rule that Apple must allow developers to inform users of alternative purchasing options at better prices. Despite that narrow victory, Apple repeatedly failed to conform to the terms from the original 2021 ruling, prompting the judge in April to issue a more detailed order outlining precisely how the App Store must be “opened up”. In response to the April ruling, prominent third-party apps have swiftly implemented web-based purchasing links. Both Spotify and Amazon’s Kindle app now include buttons directing users to purchase subscriptions via their websites, bypassing Apple’s in-app payments. Additionally, Fortnite has made a comeback on iOS after around five years, presenting users with the choice between Apple’s in-app payment system and Epic’s own payment and rewards mechanism. According to Epic CEO Tim Sweeney, there is presently a 60:40 split in usage favouring Apple’s system over Epic’s, though the gap appears to be narrowing. An Apple spokesperson, Olivia Dalton, issued a statement expressing the company’s disappointment: For now, Apple must comply with the existing injunction. Unless the Appeals Court later overturns the ruling, developers can continue to include web payment links, and Apple’s longstanding monopoly over iOS payment processing may continue to erode. The ultimate resolution will depend on the outcome of the ongoing appeals, which could set a significant precedent for how app marketplaces operate in the future. Source: The Verge
    • 007 First Light's first trailer shows off an action-packed James Bond game

      By PsYcHoKiLLa · Posted

      Why does Bond look like a frat boy?
    • Reddit takes legal action, says Anthropic trained Claude on Reddit posts without permission

      By Chay Meredith · Posted

      Reddit posts are all public, no login(therefore no agreeing to contract) to view the content. It's like the equivalent of sitting in a library and writing down notes from a textbook without signing it out and they start suing you for writing notes.
    • Politically funny images of the World

      By Michael Scrip · Posted

    • The official Funny Pictures thread

      By +Edouard · Posted

  • Recent Achievements

    • Rookie
      GTRoberts went up a rank
      Rookie
    • 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

  • Popular Contributors

    1. 1
      +primortal
      397
    2. 2
      +FloatingFatMan
      176
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!