Hi I'd like to center my menu bar and haven't had any luck, below is the css coding
#menubar
width:940px;
height:50px;
float:left;
text-align:center;
You tried using text-align: center; which aligns content of your element in the center.
If you want to center your element with respect to its container (which may be the body of your page or another element), you can do this:
#menubar {
width: 940px;
height: 50px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
text-align: center;
}
by setting left and right margins to auto you are instructing the browser to give an equal value, thus centering it.
Please update your css by this
#menubar {
width: 940px;
height: 50px;
text-align:center;
margin: 0 auto;
}
<div id="menubar"></div>
Related
I experienced a problem with placing divs. The divs "menu" and "content" are meant to be next to each other. They were, until i tried to set their width using % instead of px. After applying that change the effect of 'float: left;' was cancelled. I tried changing the order of parameters in css file, but it didn't work. I want them to maintain the 20/80 ratio, while still being next to each other. Can i achieve that using this method, or am i missing some information, and these can't be used on the same div?
#menu {
background-color: lightgray;
width: 20%;
min-height: 600px;
padding: 10px;
text-align: center;
float: left;
}
#content {
background-color: gray;
width: 80%;
min-height: 600px;
padding: 10px;
float: left;
}
<div id="menu">
menu
</div>
<div id="content">
content
</div>
Seems like your padding is breaking the line because you are filling the 100% of the space.
See https://jsfiddle.net/6dfs27u8/1/
#menu{
float: left;
background-color: lightgray;
width: 20%;
text-align: center;
height: 600px;
}
#content
{
float: right;
background-color: gray;
width: 80%;
height: 600px;
}
I have multiple images with different images which I need to display within a overview grid. The images do have totally different dimensions and ratios and the wrapper for these images is always the same height and width.
I'd like to position the images always within the center of the wrapper but that doesn't work.
I use that for the image
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
margin: auto;
float: none;
border: none;
}
and for the wrapper that one
.content_page .slide_content .product {
width: 27%;
float: none;
display: inline-block;
margin: 30px 3%;
position: relative;
height: 400px;
overflow: hidden;
border-top: 1px solid #121224;
}
Very small or wide images now do get aligned at the top of the wrapper as margin:auto doesn't seem to work. What can Id do there?
.content_page .slide_content .product {
width:<some width>;
height:<some width>;
position:relative;
}
.content_page .slide_content .product > img {
max-width:100%;
max-height:100%;
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
}
Set margin left and right as auto and use vertical align middle
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
display:inline-block;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
float: none;
border: none;
}
I'm trying to get two divs to sit side by side. On my computer, in Safari and Firefox, it appears correctly. However, on my client's computer (also using Safari) they are overlapping.
Here is my CSS:
#content
{
clear: left;
float: left;
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline;
}
#aside
{
min-height: 850px;
float: right;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline;
position:absolute;
}
Is there something I missing or have coded wrong? I'm not a web developer but have been tasked with creating a fairly simple page.
Thanks in advance.
If you want something simple and straightforward (assuming #content and #aside are two sibling divs)...
<div id="content"></div><div id="aside"></div>
#content, #aside {
float: left;
}
#content {
background: red;
width: 150px;
height: 150px;
}
#aside {
background: orange;
width: 280px;
height: 150px;
}
Here's a Fiddle to demonstrate
Note: this is a simple solution that might not be the best for what you need. I suggest doing some research on CSS display and position properties.
Hey just change the display property to display: inline-block. You dont need to float any div if you want the div to sit side by side.
#content
{
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline-block;
}
#aside
{
min-height: 850px;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline-block;
position:absolute;
}
display: inline
It will not regard the width or height of any div. When we set display: inline, it will work as if its a "span" which does not regard width or height.
display: inline-block
It will regard the width or height of any div. When we set display: inline-block, it will be inline and it will regard the width and height of div.
For some reason, the bottom section of my layout doesn't seem to be centered when I have set the left and right margin to auto
http://codepen.io/anon/pen/kvtcp
Please see the example.
I have since changed the code with some example you have provide but I have another issue. The bottom div has pushed up to left and right section div?
I have used margin-top 20px and nothing happens
Regards
Just remove:
float:left
from the .bottomsection class
and add
clear:both;
instead...
This is occuring because you have the div set to float left and the screen is the left edge.
Your divs above have margin left to pad them in.
I would suggest center your container.
http://codepen.io/anon/pen/sHvCA
body{
background:#90F;
}
#container {
width: 1000px;
height: 1200px;
padding-top: 25px;
overflow: auto;
margin:0 auto;
}
.header {
width: 800px;
height: 100px;
}
.leftimage {
float: left;
}
.middle {
height: 200px;
background:#FFF;
width: 800px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.leftsection {
width: 300px;
background-color: #FFF;
height: 400px;
margin-top: 10px;
float: left;
margin-left: 100px;
}
.rightsection {
background-color: #0F0;
height: 400px;
width: 479px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
.bottomsection {
clear:both;
height: 200px;
background: #FFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
That is because you have float:left; on it. Remove that, and add clear:both; instead.
I would recommend wrapping the left and right floated divs in another div, and apply overflow:hidden on the outer div for better control.
Ok,
remove the float from your bottom div.
.bottomsection {
height: 200px;
background: #FFF;
width: 800px;
/*float: left;*/
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
And in your HTML you have to clear the floats with i.e
<div class="leftsection"></div>
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>
This is a quick and dirty solution.
Here is a good link i.e. about floating div´s
http://css-tricks.com/all-about-floats/
It is floating for no reason and this causes showing up on the left side. Remove that. This time it should be fine, but you won't be able to see it because it has nothing in it. Add overflow:hidden; to avoid this. Then you might want to give some margin as well. And please keep in mind, use floats wise, not every problem requires float.
So im feeling pretty stupid that I can't figure this out but my problem is as following:
I got a footer and inside the footer I have 2 divs, 1 containing a Facebook image and 1 containing copyright text. What I want to do is float them next to each other, but align the Facebook image to the left and the text to the center.
Html:
<div id="footer">
<div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
<div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>
Css:
#footer {
width: 960px;
height: 50px;
margin: 0 auto;
}
#facebook {
width: 29px;
height: 29px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
#footerText {
float:left;
font-size: 11px;
text-align: center;
margin: 20px auto 20px auto;
}
You could give both divs an additional "wrapper" within the footer: http://jsfiddle.net/y9xpA/
#wrap {width: 400px; margin: auto;}
Your text in #footerText will not be centered because #footerText doesn't have a specified width. Its width is currently auto, which is default, so it will shrink to the width of the text inside; neither text-align:center or automatic side margins will fix this, as I can see you've tried.
If you want #facebook floating all the way to the left of the footer, you can give the remaining width of the footer to #footerText:
#footerText {
float:left;
font-size: 11px;
text-align: center;
width: 931px;
margin: 20px 0;
}
You can try using absolute position to move the Facebook div out of the flow of the page and to the left, then giving the footer text a left margin equal to the facebook div's width and centering it:
#footer {
width: 960px;
height: 50px;
position: relative;
}
#facebook {
width: 29px;
height: 29px;
position: absolute;
left: 0;
}
#footerText {
font-size: 11px;
text-align: center;
margin: 20px auto 20px 29px;
}
Demo
It'd be much, much easier to just give the #footer a text-align:center and set the other elements inside it to display:inline. Check out a demo: http://jsfiddle.net/pUKwJ/
#facebook:
{
display: inline-block;
text-align: center;
}
#footer-text
{
display: inline-block;
text-align: center;
vertical-align: center;
}