4 Replies - 2334 Views - Last Post: 19 December 2013 - 04:17 PM

#1 java_user123   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 28-July 13

The task I am doing is to remove space between two vertical divs.

Posted 25 November 2013 - 12:55 AM

body {
	margin: 0;
	padding: 0;
}


#header {
	font-family: "Lucida Sans";
	background-color: #74A6BD;
	width: 100%;
	height: 50px;
	margin: auto;
	padding: 25px;
	border: 1px solid black;
	text-align: left;
	top: 0px;
	position: fixed;
}

#menu {
	background-color: #D4E7ED;
	width: 350px;
	height: 10px;
	margin: auto;
	padding: 25px;
	border: 1px solid black;
	text-align: center;
	top: 40px;
	right: 0px;
	position: fixed;
}

#content {
	background-color: #79BAEC;
	width: 100%;
	height: 650px;
	position: relative;
	padding-right: 50px;
}

#footer {
	background-color: #7195A3;
	margin: auto;
	border: 1px solid black;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 20px;
	
}

#section2 {
	float: right;
	width: 675px;
	height: 700px;
	background-color: #79BAEC;
}

#section1 {
	float: left;
	width: 650px;
	height: 600px;
	border: 1px solid black;
	background-color: #79BAEC;
}




I just need help to remove the white space between these to vertical divs, using a simple CSS attribute.

Is This A Good Question/Topic? 0
  • +

Replies To: The task I am doing is to remove space between two vertical divs.

#2 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,318
  • Joined: 12-December 12

Re: The task I am doing is to remove space between two vertical divs.

Posted 25 November 2013 - 06:08 AM

You've set specific widths for the two sections. When I first ran this the second section fell below the first section, because my screen width is less than 650 +675 pixels. Unless the user's screen-width is 650 + 675px you will have a gap.

One way to approach this is to use percentage widths.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,318
  • Joined: 12-December 12

Re: The task I am doing is to remove space between two vertical divs.

Posted 25 November 2013 - 12:03 PM

Alternatively, erm, float them both to the left :)
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil   User is online

  • Professor Snuggly Pants
  • member icon

Reputation: 6833
  • View blog
  • Posts: 31,498
  • Joined: 10-May 07

Re: The task I am doing is to remove space between two vertical divs.

Posted 25 November 2013 - 01:58 PM

** Topic moved to HTML/CSS as it is not related to php **
Was This Post Helpful? 0
  • +
  • -

#5 nfc212   User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 17
  • Joined: 08-December 13

Re: The task I am doing is to remove space between two vertical divs.

Posted 19 December 2013 - 04:17 PM

You haven't posted your HTML code so I'm assuming it's something like the following:

<body>
	<div id="header">
		<div id="menu"></div>
	</div>
	<div id="content">
		<div id="section1"></div>
		<div id="section2"></div>
	</div>
	<div id="footer"></div>
</body>


Use the following CSS:

html{
background-color: #79BAEC; /* removes white area if page is zoomed using Ctrl+mousewheel */
}
body {
margin: 0;
padding: 0;
}
#header {
	font-family: "Lucida Sans";
background-color: #e9e9e9;
width: 100%;
height: 50px;
margin: auto;
padding: 25px;
border: 1px solid black;
text-align: left;
top: 0px;
position: fixed;
z-index:1;
}
#menu {
background-color: #D4E7ED;
width: 350px;
height: 10px;

margin: auto;
padding: 25px;
border: 1px solid black;
text-align: center;
top: 40px;
right: 0px;
position: fixed;
}
#content {
position:relative;
overflow:auto; /* forces content div to extend to bottom of section divs */
margin: 100px auto 0; /* pushes content div below the position:fixed header */
background-color: #79BAEC;
width: 100%;
padding-right: 50px;
}
#section1 {
float: left;
width: 650px;
height: 600px;
border: 1px solid black;
margin:1px 0 0 0; /* pushes section1 div down 1px so border does not overlap header border */
background-color: #e3e3e3;
}
#section2 {
float: left;
width: 675px;
height: 700px;
background-color: #f3f3f3;
margin:0 0 22px 0; /* pushes section2 div up 22px (height of footer plus the 1px borders) so footer does not overlap section2 div */
}
#footer {
background-color: #7195A3;
margin: auto;
border: 1px solid black;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}


I have commented the alterations. I also changed the background colours of some of the <div>s in order to actually see them properly, change them back as required.

The main problem is the page is very wide.

650px + 675px + 2px(section1 borders) + 50px(content div padding) = 1377px

Which means anyone with a display under 1440px wide will see section1 placed above section2 and a horizontal scrollbar. This may mean that they zoom the page to make sense of it, which may cause the HTML element to become visible which will display as a white area between the content and footer <div>s. That is the reason for the background colour on the HTML element.

Not sure what you are trying to achieve here but there is almost certainly a better way.

Off Topic: I have found that attaching the same background colour to the HTML element as that applied to the body element helps mitigate the tendency in IE to produce a white flash just as the page begins to load, particularly pages in iframes.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1