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>
Related
This is the snippet from my css file
#centered{
position: relative;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#table{
text-align: center;
font-size: 1.5em;
font-weight: 900;
background-color: #5E9DC8;
}
This is the html section that I'm trying to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bicycle Store Database</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<h1>ACME BICYCLE SHOP</h1>
<h2>GET IN GEAR!</h2>
<div id="centered">
<table id="table" border="0" cellpadding="10">
<tr>
<td>Go Shopping!<br/><br/>
Check a Service Ticket</td>
</tr>
</table>
</div>
<p><br/>HOME</p>
</body>
</html>
This is the result:
Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?
Why you are using table for that? any specific reason? Can't you simply do it like this?
<div class="center">
Go Shopping
<br>
</div>
.center {
margin: auto;
/* Other styles goes here, width height background etc */
}
you are centering #centered but not the table in it.
add margin:0 auto; to #table.
The div is centred in the page.
The table is left aligned in the div.
Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.
I've searched for several hours and tried out everything I found, but nothing helped, so here goes. I'm trying to set up a website that has a left column and right column both of width 200 pixels, while having the middle column taking up the remaining space. I noticed that margin-right is completely ignored. I tested out overflow, but that didn't seem to work either. Granted, I might have done the overflow bit wrong. Anyways, here's my test site, relevant CSS, and the HTML.
The current background for the middle column just doesn't do well with scaling, so I'll probably swap it for something else.
Site: http://mnslayer27.webs.com/bgtest.html
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>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
<div id="left">
<div id="right">
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
</div>
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
CSS:
#left {
//overflow:hidden;
margin-left: 200px;
}
#right {
margin-right:200px;
}
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
#column2 {
position: absolute;
top: 120px;
//left: 200px;
overflow:hidden;
color: #000000;
float:left;
width: 100%;
height: 1688px;
//margin-left: 200px;
//margin-right: 200px;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}
You can try using absolute position and specify the left and right for the divs instead of using width.
#left {
position: absolute;
left: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#right
{
position: absolute;
right: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#centre
{
position: absolute;
left: 100px;
right: 100px;
height: 100%;
overflow:hidden;
background-color: #a0a0d0;
border: solid 2px black;
margin: 4px;
padding: 4px;
}
This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.
Heres a simple JSFiddle
hope that helps
Look at my answer here that helped someone with just about the same exact issue. There's a JSFiddle included
Not positive based on your question exactly what you want the final product to look like but based on your three column approach and trying to get your margins to work properly try floating all three of your columns, like so
<!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>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style>
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.column1
{
float: left;
width: 200px;
margin: 0 100px 0 100px;
}
#column2 {
color: #000000;
float:left;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
}
#column3
{
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class="column1">
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
</div>
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0"alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
If you set your div to be display: inline-block; instead of display: block;, it may solve the issue you're having. Be aware that this may have other consequences in your code though. I'd be way of using a solution that involves position: absolute; as well though, because this can get messy when you have other elements interacting with it/each other.
I'm sure there was a method involving box-sizing: border-box; but I can't seem to work it out right now.
Consider the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
My question is why buttons don't stretch to 100% width if their display is block. How to achieve this? I can't set style of buttons to width: 100% because they would overflow their parent block because of the margin.
The initial defination of Button Layout was committed on 2019, which solved the rendering problem of button elements. https://github.com/whatwg/html/pull/4143.
we could refer to the HTML Living Standard to see an important rule of Button Layout as follows:
If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
we should know that a block with inline-size:fit-content | max-content | min-content will shrink its width even if display:block.(by the way, width:fit-content | max-content | min-content does the same effect)
try this (require chrome 57+, but in FireFox 66+ we could try with inline-size:max-content):
<div style="
inline-size: fit-content;
background: linear-gradient(0deg, #ddd, #fff);
padding: 2px 6px;
border: 0.5px solid #bbb;
font-size: 13px;"
>click me!</div>
view result
You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:
<!DOCTYPE>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
width:100%;
margin: 10px 0;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black; padding:0 10px;">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
Demo: http://jsfiddle.net/xwt9T/1/
Try with this ,
<div style="width: 100px; border: 1px solid black">
<button style="width:100%; float: left;margin-left:0px;">hello</button>
<button>hi</button>
</div>
flex-grow: 1 will produce the expected behavior.
Given a sticky footer such as that on Ryan Fait's site with a fixed pixel height, is it possible to center, both horizontally and vertically, variable-size content in the space above this footer?
I would suggest looking at Bobby van der Sluis's article on Footers at A List Apart.
Example #7 at the end of his article shows a vertically centered block. It does rely on scripting, but it is truly minimal.
edit You can also use a single-cell table to accomplish vertical centering. Incorporating it with Ryan Fait's sticky footer would give you something like this:
<!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" xml:lang="en">
<head>
<style type="text/css">
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#footer {
margin-top: -150px;
height: 150px;
}
#footer {
background: #bbd;
}
.block {
width: 300px;
padding: 20px;
background: yellow;
margin: 0 auto 150px; /* height of #footer */
}
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div class="block">
<h1>Vertically Centered!</h1>
<p>This block will remain centered. Just needs that one table cell wrapping.</p>
</div>
</td></tr>
</table>
<div id="footer">Footer Content here</div>
</body>
</html>
well, then you could set this for the vertical align of content:
.verticalalign{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
I'm sure you've heard it before... a div is not centering correctly in IE even though it works perfectly in Chrome and Firefox. I've already researched and tried stuff with text-align and auto margins but have come up empty. I also tried replacing the tags with another div or something else but did not have any positive results. Any insight anyone can offer will be appreciated.
<!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=iso-8859-1">
<style type="text/css">
.thumbnails {
background-color:white;
border: solid 1px #000099;
height:120px;
width: 640px;
overflow-y:scroll;
margin-bottom:20px;
position:relative;
padding-top: 10px;
}
#hugeimage {
background-color:white;
border-top: solid 1px #000099;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
height:550px;
width: 640px;
display:table-cell;
vertical-align:middle;
}
#hugeimage a,
#hugeimage img {
margin: 0px;
padding: 0px;
border: 0px;
}
#imageinfo {
background-color:white;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
width: 640px;
}
body {
background-color: #99ccff;
text-color: #000099;
}
</style>
</head>
<body>
<h3 align="center">Ship Detail</h3>
<center>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</center>
</body>
</html>
I've removed data from the divs. This bare-bones markup still has the hugeimage and imageinfo divs left-aligned in IE but not in chrome/ff.
Remove the <center> tags and the align="center", and add a wrapper <div id="content"> around all your content. Then add this CSS style.
#content {
width: 960px;
margin: 0 auto;
}
Example:
<div id="content">
<h3>Ship Detail</h3>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</div>
Here is your solution:
See the working demo
I had the same issue while trying to center a loading modal box in IE. Removing
display: table; did the trick. Maybe this could help someone else.