CSS: Keeping a set width between boxes

5,228 · January 13, 2006

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

9,394 · January 13, 2006

the second box doesn't need position : absolute;

Can't it just flow under it

5,228 · January 13, 2006

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. :)

Edited January 13, 2006 by JMann

9,394 · January 13, 2006

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....

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

&lt;div id="content"&gt;

blah blah

&lt;/div&gt;

&lt;div id="news"&gt;

blah blah

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

for height ....

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;meta name=ProgId content=VisualStudio.HTML>;
&lt;meta name=Originator content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;style&gt;
#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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="content"&gt;

blah blah

&lt;/div&gt;

&lt;div id="news"&gt;

blah blah

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

cheat and use 49% each.

5,228 · January 13, 2006

Luna, I meant width, but I will try them out now. Just wondering, would that code let the sit next to each other, like in my picture I just put up?

9,394 · January 13, 2006

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

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;meta name=ProgId content=VisualStudio.HTML>;
&lt;meta name=Originator content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;style&gt;
#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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="content"&gt;

blah blah

&lt;/div&gt;

&lt;div id="news"&gt;

blah blah

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

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

5,228 · January 13, 2006

Thanks for the edit on your post, I am trying that now. :)

5,228 · January 13, 2006

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.

9,394 · January 13, 2006

Both set to 40%, both float:left;

works on IE and FF fine.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;meta name=ProgId content=VisualStudio.HTML>;
&lt;meta name=Originator content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="content"&gt;

blah blah

&lt;/div&gt;

&lt;div id="news"&gt;

blah blah

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

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.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;meta name=ProgId content=VisualStudio.HTML>;
&lt;meta name=Originator content="Microsoft Visual Studio .NET 7.1"&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="content"&gt;

blah blah

&lt;/div&gt;

&lt;div id="news"&gt;

blah blah

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

5,228 · January 13, 2006

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;
}

9,394 · January 13, 2006

What else is in there messing it up?

Looks ok on it's own...

got a link, or the rest of the page?

5,228 · January 13, 2006

Let me PM you the Dev link for it, so you can see. Few minutes. :)

Sign In

CSS: Keeping a set width between boxes

Question

JMann Veteran

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

lnmnky

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

lnmnky

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

lnmnky

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

lnmnky

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

lnmnky

Link to comment

Share on other sites

JMann Veteran

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker