CODEWITHSUNDEEP
htmlcss
VoskanyanT
VoskanyanT

Reputation: 47

Remove borders without affecting position

I set the borders for all my divs, but when I removed borders it affected the positioning I have set.

div {
	border: 1px solid #1bbc9b;
}

#main {
	width: 1020px;
	margin: auto;
}

#navbar {
	height: 95px;
}

#spacing {
	margin: 25px 0px 55px 25px;
	height: 47px;
}

#logo_img {
	margin-right: 12px;
	float: left;
}

#logo_txt {
	margin-top: 5px;
	font-size: 15px;
	font-weight: bold;
}

#logo_txt span {
	font-weight: normal;
	font-size: -0.5em;
}

.float_div {
	display: inline-block;
	position: relative;
	height: 47px;
}

#float_div_left {
	float: left;
	width: 25%; 
}

#float_div_left a:link, #float_div_left a:hover, #float_div_left a:active, #float_div_left a:visited {
	text-decoration: none;
	color: black;
}

#float_div_right {
	float: right;
	width: 58%; 
}

#nav_menu {
	margin: 3px 0px 0px 0px;
	list-style: none;
}

#nav_menu li {
	display: inline-block;
	margin-top: 1px;
}

#nav_menu li a {
	display: inline-block;
	padding: 10px 25px;
	text-decoration: none;
	color: black;
}

#nav_menu li a:hover, #nav_menu li a:active {
	background-color: #1bbc9b;
}

#jumbotron {
	height: 453px;
	background-image: url(../images/jumbotron.jpg);
	background-repeat: no-repeat;
}

#caption {
	margin: auto;
	margin-top: 40px;
	width: 585px;
	height: 350px;
}

#we_bb {
	color: white;
	text-align: center;
	font-weight: normal;
	font-size: 55px;
	margin-bottom: 30px;
}

#we_bb span {
	font-weight: bold;
}

#we_bb_1st_p {
	text-align: center;
	font-size: 18px;
	color: white;
	margin-top: 0px;
}

#learn_more {
	text-align: center;
	margin-top: 45px;
}

#learn_more a {
	display: inline-block;
	margin: auto;
	padding: 10px 20px;
	color: white;
	background-color: #1bbc9b;
	text-decoration: none;
}

#down_button_img {
	display: block;
	margin: auto;
	margin-top: 35px;
}
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Style/css_reset.css" />
		<link rel="stylesheet" href="Style/style.css" />
		<title>Site</title>
	</head>
	<body>
		<div id="main">
			<div id="navbar">
				<div id="spacing">
					<div class="float_div" id="float_div_left">
						<a href="index.html">
							<img src="images/b-logo.jpg" id="logo_img" />
							<p id="logo_txt">BAK-ONE <br/>
								<span>One Page Flat Template</span>
							</p>
						</a>
					</div>
					<div class="float_div" id="float_div_right">
						<ul id="nav_menu">
							<li><a href="#">HOME</a></li>
							<li><a href="#">PORTFOLIO</a></li>
							<li><a href="#">ABOUT</a></li>
							<li><a href="#">CONTACT</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="jumbotron">
				<div id="caption">
					<h1 id="we_bb">We Build <span>Brand</span></h1>
					<p id="we_bb_1st_p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
					<p id="learn_more"><a href="#">LEARN MORE</a></p>
					<img id="down_button_img" src="images/down_button.png" />
				</div>
			</div>
		</div>
	</body>
</html>

Site with borders http://i62.tinypic.com/24cgwwi.jpg

Site without borders http://i60.tinypic.com/1gsjuc.jpg

Upvotes: 0

Views: 552

Answers (3)

A.B
A.B

Reputation: 20445

set borders to transparent color.

Transparent border still holds the space for the border you are just hiding it with its color changed that is not visible , so it doesnt effects your positioning.

Removing the borders completing will effect your positioning(the way you initially calculated things) as border also takes space in outer width(full size) of the element

div {
    border: 1px solid transparent ;
}

Upvotes: 4

isherwood
isherwood

Reputation: 61083

Another approach is to do as Twitter Bootstrap does, and set box-sizing to border-box. This makes border and padding part of the box's sizing dimension. Bootstrap actually does this for the entire document.

div {
    width: 100px;
    height: 100px;
    background: pink;
    box-sizing: border-box;
}
div.border {
    border: 2px solid #000;
}

Demo

The advantage to this technique is that you're not writing extra CSS to handle sizing issues.

Upvotes: 1

Rob
Rob

Reputation: 15160

Alternatively to @A.B's answer, you can use outline which will do the same thing but doesn't take up any space like borders do. However, if your design requires the space used by the border, then you will have to change your element sizes or not use this altogether.

Upvotes: 1

Related Questions