I would like to center a div inside of the header which is 100% width. The div that needs to be centered has a physical width and height. I have tried using position absolute, but when resizing the screen, the div will stay centered. I want the div to stay in the center of the design, not the screen. How do I accomplish this? I also do not want to use position fixed for this.
css:
header{
position: relative;
width: 100%;
height: 65px;
background-color: #662D91;
}
#banner{
position: absolute;
left: 50%;
margin-left: -240px;
width: 480px;
height: 115px;
border-radius: 20px;
}
HTML:
<header>
<div id="banner">
<a href="/index">
<img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" />
</a>
</div>
</header>
EDIT: I have solved my issue by adding a div between the full width header and the logo that is the width of the design. It appears to have fixed my problem.
JSFiddle of my solution to my problem: http://jsfiddle.net/U3Hpa/2/
The simple solution is to do text-align: center.
#banner{
text-align: center;
}
http://jsfiddle.net/U3Hpa/
I solved my issue by adding another div that was a child of the header element but the parent of #banner. I then set it at a width of 980px (same as width of content container), and set it to margin: 0 auto;. That seemed to fix my issue. I was looking for a CSS solution without changing the HTML markup, but I could not find one. Thanks for all the feedback.
The Fiddle does not illustrate the solution the best because of the small viewport, but the code is accurate.
JSFiddle: http://jsfiddle.net/U3Hpa/2/
#banner{
margin-left: auto;
width: 480px;
height: 115px;
border-radius: 20px;
}
by manually defining a left position, and margins, you make the browser do that no matter what the size of your other divs.
the auto feature in your margins will automatially center the div relative to the header
You should try this:
#banner{
position: fixed;
left: 50%;
margin-left: auto;
margin-right: auto;
width: 480px;
height: 115px;
border-radius: 20px;
}
Try this:
header{
position: relative;
width: 980px;
height: 65px;
background-color: #662D91;
}
#banner{
position: relative;
margin: 0 auto;
width: 480px;
height: 115px;
border-radius: 20px;
}
Related
I have been trying to figure out how can I adjust image width and height so that it does not stretch plus, its only lower portion shows. I have managed to adjust it, but i dont know how to show the only lower portion. For reference , i want to do something like we do in background-image background-position: center;. This is my code so far.
<div id="featured-banner" class="lazy-load song-image">
<img alt="featured img" src="images/U1NbAmCyHljBGOOHH28bSve3wBk9Fkjb.jpg">
</div>
CSS
.song-image {
width: 100%;
height: 412px;
overflow: hidden;
}
#featured-banner img {
display: inline-block;
width: 100%;
margin-top: 0px;
padding: 0px 15px 15px;
}
You could try using the object-fit and object-position css properties.
Good CSS Tricks article on this.
I created a plunker as i understand your issue, check this and let me know that it is what you want. Here is the link - https://plnkr.co/edit/50rZCpPTFKOR0g6QCnZf?p=preview
div{
width: 500px;
overflow: hidden;
height: 200px;
position: relative;
}
div img{
width: 100%;
position: absolute;
bottom:0;
}
I'm trying to achieve a fixed left sidebar with fluid right content within a container.
I've checked out answers that tell me to set a margin-left on the content which is not what I want to do.
The closest I could get was through this answer:
A `position:fixed` sidebar whose width is set in percentage?
<div class="main-container">
<div class="sidebar">
<div class="sidebar-content-container">
<div class="sidebar-content">
<!-- Sidebar content here -->
</div>
</div>
</div>
<div id="content">
<!-- Scrollable Content Here -->
</div>
</div>
This is the CSS
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
.sidebar {
float: left;
width: 20%;
height: 100%;
position: relative;
.sidebar-content-container {
height: 100%;
position: fixed;
.sidebar-content {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
}
}
#content {
height: 100%;
width: 80%;
display: inline-block;
float: right;
}
}
The way I have it done right now, once you inspect the sidebar, the width it calculates is not within the main-container but the rest of the viewport. What I'm trying to achieve is to keep the 20% calculation within the main-container without setting a fixed width.
So the yellow part represents the problem for me. Once I set it fixed, it doesn't stay within the parent container. My goal is after I set it to fixed, it stays within the red part.
I know I could do something like sidebar width 100px content margin-left 100px but that's not the objective and do not like any javascript alternatives.
Thoughts?
Thanks!
Your are using width:100% in this div and also padding which increases its width from 100% because padding adds to the width. So for giving the padding within the 100% width you can use property box-sizing:border-box as below:
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
box-sizing:border-box;
}
Well, I guess that's the thing with fixed elements. They kind of have a mind of their own. Once an element is fixed, it doesn't seem to obey the overflow and dimension rule of its parent containers. They take their dimensions (if you are using %) from the browsers width. So I think what you should do is to give the fixed element the same dimension as its immediate container.
<div id="parent-box">
<div id="fixed-elem"></div>
</div>
//css
#parent-box{
position: relative;
width: 40%;
height: 100%;
float: left;
overflow: hidden;
}
#fixed-elem{
position: fixed;
width: 40%;/*this is 40% of the browser width not the container*/
height: 100%;/*this is 100% of the browser height*/
}
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.