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:
http://imgur.com/igI73Y1
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!
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>
<!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>
Related
Hiw can I split my page into one top (50% height, width=100%) and two bottom columns(50% height, 50% width).
I tried but no success...
<html>
<head>
<title>CSS devide window into three (horizontal, 2 vertical )</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
.wrapM {
width: 100%;
height: 100%x;
padding:2px;
}
.wrapT {
width: 100%;
height: 50%;
padding:2px;
}
.wrapB {
width: 100%;
height: 50%;
padding:2px;
}
.wrapl {
width: 50%;
height: 100%;
padding:2px;
}
.wrapr {
width: 50%;
height: 100%;
padding:2px;
}
</style>
</head>
<body>
<div class="wrapM">
<div class="wrapT">Hello World This is upper Content</div>
</div>
<div class="wrapB">
<div class="wrapl">Hello World This is bottom LEFT Content</div>
<div class="wrapr">Hello World This is bottom right Content</div>
</div>
</body>
</html>
To get .wrapB1 and .wrapB2 side by side, they should float: left. But this is not sufficient, because of the padding. Add box-sizing: border-box to have this fixed.
To get a height of 50%, html and body should be set to 100% height. Additionally, you have a syntax error in your height specification of .wrap.
Have a look at https://jsfiddle.net/sgtb00nt/ to see a working version. I have also fixed the wrong nesting of <div>s.
So I have a school project. I must make my own website. I have a problem though: I can't vertically align h1 along 2 images floating left and right.
embedding it in a div and using vertical-align: middle; doesn't help. even with a prefix hack that I found here
here is the source code of my website project:
Html:
<!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>
<title>The dankest website on earth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/CSS.css">
</head>
<body>
<div id="header">
<img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: right;" width="200px" height="200px" />
<img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: left" width="200px" height="200px" />
<h1 class="DebugBorder">Sample text</h1>
</div>
</body>
</html>
CSS
.DebugBorder{ border: 2px red solid}
body {background:linear-gradient(to bottom, darkred, black);background-repeat: no-repeat;}
html {height: 100%;}
h1 {text-align: center; font-size: 4em; font-family: impact; width: 50%; margin: auto; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}
#header {height: 200px}
I removed any solutions that didn't worked and kept it to my bare minimum.
If you want the text vertically centered between the images, a table display would work fine.
Your CSS changes would look something like
#header {
height: 200px;
display:table;
}
.DebugBorder{
border: 2px red solid;
display:table-cell;
width:29%;
}
Here's a fiddle using your code: https://jsfiddle.net/dy4nycjk/1/
But if you want the text vertically centered and covering the images, you'll have to do a little more work with positioning.
Here's another fiddle with an example of the text centered over your two images: https://jsfiddle.net/ktLn72yq/
If your H1 title is only a single line then you can set it's line-height to match the height of the images. So in this case:
.DebugBorder {
border: 2px red solid;
line-height:200px;
}
That should align the H1 to middle of the images.
Edit: Or apply the line-height to the H1 element instead of the debug class like I just realized. :)
I am currently creating a practice website for my Arma 2 Unit (88th Airborne Divsion), I have created a simple navigation bar using table headers hyperlinked, however the space between the table headers is dependant on how long the word is. Is there a way of making equal space between the headers?
HTML CODE:
<!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>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
<div id="navbar"><table width="680" border="0">
<tr>
<th>Home</th>
<th>About Us</th>
<th>Members</th>
<th>Apply</th>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin:0;
}
#container {
height: 100%;
width: 100%;
}
#banner {
height: 125px;
width: 680px;
margin-left:auto;
margin-right:auto;
}
#navbar {
background-color:#333;
width: 680px;
height:25px;
margin-right: auto;
margin-left: auto;
text-align:center;
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
}
Because of table width=680, you can put in CSStr{ width: 170px; }, or, you can change th in CSS
tr{
position: relative; /* you may put it out, maybe it will work without it */
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
width: 25%;
}
which gives you more flexible sizing. Also, I don't know if you have any additional borders or margins. If so, tds will not fit in that 25% (because dimension is measured without margin, padding and border), so play with it (lower percentage until you get the right look).
I have the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#scale div {
float: left;
width: 75px;
padding: 5px;
border: 0px #333 solid;
}
</style>
</head>
<body>
<div style="font-size: 10px;" id="scale">
<div id="box" align="center" style="background:#88ff88;" > </div>
<div id="a"> 1   </div>
<div id="box" align="center" style="background:#ff8888;"> </div>
<div id="b"> 2   </div>
<div id="box" align="center" style="background:#ff88ff;"> </div>
<div id="c"> 3   </div>
</div>
</body>
</html>
How can I get the above on three lines. That is, a color block and a number on a single line.
First, you have multiple elements with the same ID. It doesn't work like that. ID is unique, multiple elements can have the same class.
Second, I would recommend just having an empty span tag inside a div for your box. Divs display block by default (take up whole line) so you can have an inline-block span (takes up only required space but treated like block element) with set width and height and a number next to it.
Also, inline styles make the code look messy and difficult to read & work with. You should keep your CSS separate from your HTML.
<div id="scale">
<div id="a"><span></span>1</div>
<div id="b"><span></span>1</div>
<div id="c"><span></span>1</div>
</div>
#scale div span {
width: 100px;
height: 20px;
display: inline-block;
}
#a span{
background-color:#00F;
}
#b span{
background-color:#0F0;
}
#c span{
background-color:#F00;
}
DEMO
In your style tag, use display: inline-block on all of your box divs.
I am trying to make a simplistic layout for my website.
I want this navigation bar to fill the screen horizontally but the page content to be centered.
I have managed to achieve this, but it breaks when the content gets bigger than its predefined width.
I have only a few pages where reports and tables push the design wider than its default so would like these pages to expand nicely.
Currently the moment my content gets to wide, it hugs the left of its container but pushes the right margin out.
I would like this to push the left and right margins out equally and remain in the center.
How can I achieve this? Here is my current html:
<!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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header">LOGO</div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</div>
<div id="footer">footer content</div>
</div>
</body>
</html>
I have simulated the content getting wider by making a really really long word.
In my site this would typically be a report in an HTML table.
Any help will be greatly appreciated. Thanks!
edit:
this isn't just about text which can be wrapped or broken.
Consider replacing the "contentcontentcontent" above with a table that is wider than its parent div:
<table border="1" width="800px"><tr><td>here is some content</td></tr></table>
This table now touches the left border of the content div, but pushes out the right border of the content div. I want it to push out both borders equally and remain in the center
Here's how to do it (Scroll to MidiMagic's post): http://www.daniweb.com/forums/thread57605.html
You need to wrap words in div#content.
You can use something like this:
div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
Someone who is not a member on this site managed to solve this problem for me.
What we did is set the content div to 100%, then place a div inside this surrounding the content with align="center"
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
The entire solution:
<!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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header"><br/>LOGO<br/></div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
</div>
<div id="footer">footer content</div>
</div>
</body>