Maybe someone can help me out. I am working on a mock web page in WordPress and I am running into a small issue. Two of the divs are centered on my 17in PC screen but when I look at them on a desktop, they are the only two divs that are not centered on the screen and are not responding when I shrink a window down. The two divs / classes that I am working with are .headerwrap and .ibanner.
Here is the code for just the .headerwrap:
.headerwrap {
display: block;
min-height: 88px;
background-color: #FFF;
width: 1200px;
position: relative;
margin-left: 185px;
vertical-align: middle; }
and the .ibanner is:
.ibanner {
display: block;
width: 100%;
background-color: #95C837;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 20px; width: 1200px;
margin-left: 185px;
box-shadow: 10px 10px 5px grey;
vertical-align: middle; }
The website is: http://bitlamp.wctc.edu/~ktepp/StellarBlueTechnologiesTest/
Can anyone tell me what I am doing wrong and how to fix this?
Thank you in advance!
Related
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
#searchInput {
width: 50%;
height: 40px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
top: -12em !important;
left: 1em !important;
}
I can't get this div to stay centered in my mediawiki wiki. Is there a way to do this? The code above doesn't do anything. It just stays in place. I have applied what I know in previous post, and it still doesn't work for certain divs.
I am building a backend for a website and I got a strange behavior of display table/cell/row
My fiddle: http://jsfiddle.net/5G9nJ/
html
<div id="App">
<div id="AppFrame">
<div id="AppMenu">
<div id="AppMenuContent">test</div>
<div id="AppMenuLog">test</div>
</div>
</div>
</div>
css:
html, body{
height: 100%;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ebebeb;
font-family:Helvetica;
}
#App{
height: 100%;
display: table;
margin-left: 0px;
margin-top: 0px;
}
#AppFrame{
display: table-row;
height: 100%;
margin-top: 0px;
}
#AppMenu{
height: 100%;
width: 300px;
margin-top: 0px;
display: table-cell;
}
#AppMenuContent{
max-width: 65px;
height: 100%;
background-color: red;
}
#AppMenuLog{
margin-left: 65px;
width: 200px;
height: 100%;
background-color: #999999;
}
#AppDisplay{
display: table-cell;
height: 100%;
}
The problem is that, the div "AppMenuLog" will not appear next to the div "AppMenuContent"! I've tried to set the both divs to blocks, changed the width and heights but nothing solves this, can anyone help me?
You need to add display: inline-block to #AppMenuContent and #AppMenuLog.
Here's a JSFiddle.
This is a lot better and easier than using float: left; see the reason here.
If you want to go with the table structure check this
DEMO
display:table-cell; needs to be added to #AppMenuLog and #AppMenuContent
DEMO
You need to add float:left to div #AppMenuContent
#AppMenuContent {
background-color: #FF0000;
float: left;
height: 100%;
max-width: 65px;
}
Next time try to search harder an answer. On this is are a lot of questions similar with your. You need to use float:left;
Here you find your solution http://jsfiddle.net/5G9nJ/5/
See: http://jsfiddle.net/b2BpB/1/
Q: How can you make box1 and box3 align to the top of the parent div boxContainer?
#boxContainerContainer {
background: #fdd;
text-align: center;
}
#boxContainer {
display: inline-block;
border: thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
}
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
#box2 {
width: 50px;
height: 100px;
background: #999;
display: inline-block;
}
#box3 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
Help much appreciated...
Acknowledgement: This question is forked from an answer previously given by https://stackoverflow.com/users/20578/paul-d-waite : Getting a CSS element to automatically resize to content width, and at the same time be centered
Try the vertical-align CSS property.
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
vertical-align: top; /* here */
}
Apply it to #box3 too.
As others have said, vertical-align: top is your friend.
As a bonus here is a forked fiddle with added enhancements that make it work in Internet Explorer 6 and Internet Explorer 7 too ;)
Example: here
You can add float: left; for each of the boxes (box1, box2, box3).
http://jsfiddle.net/Wa4ma/
Use vertical-align:top; for the element you want at the top, as I have demonstrated on your jsfiddle.
http://www.brunildo.org/test/inline-block.html
Or you could just add some content to the div and use inline-table
Given a div with known dimensions, say width: 300px; height: 200px, what is the easiest method to place it in the middle of the screen both vertically and horizontally ? Example here
I'm interested in latest Firefox (no need for IE hacks).
CSS only please, no Javascript.
Position it 50% from the window/parent container and use a negative margin size that's half of the elements width/height :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
You might need to set height: 100%, on both the body and html
html, body {
height: 100%;
}
Edit: Here's a working example .
Without supporting IE, this is actually pretty easy to achieve using display: table and display: table-cell.
Here's an update to your HTML:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
CSS:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And to preview: http://jsfiddle.net/we8BE/
I don't know if this is the simplest way, but it seems to work.
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
What methods are you open to using? For example CSS up to what level - 2 or 3? Javascript? jQuery? My first thought is that, since divs can be centred horizontally through margin-left: auto; and margin-right: auto;, maybe try margin: auto; for all 4 sides. Let me know if it works.
The easiest? One of the numerous jQuery center plugins available...