CODEWITHSUNDEEP
htmlcsslayout
PaulF
PaulF

Reputation: 122

CSS Layouts and inline-block with width %

Im trying to create a fluid layout of 3 or more DIV boxes that can sit in a fixed or fluid container that looks like this:

example:

So far ive used display: inline-block to make two of the boxes sit next too each other, which does work, however when the width is set to 48% and margin is set to 1% (Which when everything is inline, should add up to a total of 100% if im correct?) the second div goes on to a new line.

With regards to the 3rd box, when i set the width to 98% (and then the margin of 1% that is applied) the box overhangs the container on the right...

What ive essentially ended up with is this: problem:

I can alter and reduce the % to make it all 'sort of' fit how i want, but then the top two boxes and bottom large box just don't align up nicely.

For example: https://i.sstatic.net/23ppy.jpg

Essentially what im trying to produce is a quick snippet to use that i can add to any container on a website that provides a nice, clean layout, ready for content to be added.

(Im making a few different layouts)

Id like to try and limit how many classes are created so i can easily edit the layouts as needed.

for example:

.contentbox (the main 'settings' to make these boxes work)

.smallbox (if 3 divs are set to .smallbox one after another, the 3 will show inline)

.normalbox (if 2 divs are set to .normalbox one after another, the 2 will show inline)

.largebox (if 1 divs are set to .largebox it will go to the edge of the container)

I want to use % so irregardless of the size of the container, it will always fit without having to change width pixels etc.

Currently this is what ive got: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 600px;
border: thin solid #000;
}
.contentbox {
position:relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 48%;
margin: 1%;
vertical-align: top;

}
.largebox {
width:100%;
}
</style>
</head>

<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>

Thank you in advanced for any help!

Upvotes: 2

Views: 107

Answers (2)

Gowtham
Gowtham

Reputation: 13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 100%;
border: thin solid #000;float:left;
}
.contentbox {
position:relative;
border:0px solid #00f;
display: inline-block;
width: 48%;float:left;box-shadow:0px 0px 2px 0px #555555;
margin: 1%;
vertical-align: top;

}
.largebox {
width:98%;margin: 1%;
}
</style>
</head>

<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28583

You have to take into consideration that borders take up width and that the margin of 1% of either side of the large container means that it can only be less than 100% width. I set it to 94, and your small ones to 45 and set padding to 0!important; Now it works.

#container {
  width: 100%;
  padding: 0!important;
  border: thin solid #000;
}
.contentbox {
  position: relative;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #00F;
  border-right-color: #00F;
  border-bottom-color: #00F;
  border-left-color: #00F;
  display: inline-block;
  width: 45%;
  margin: 1%!important;
  vertical-align: top;
}
.largebox {
  width: 94%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Containers</title>

</head>

<body>
  <div id="container">
    <div class="contentbox">class="contentbox"</div>
    <div class="contentbox">class="contentbox"</div>
    <div class="contentbox largebox">class="contentbox largebox"</div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions