I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div class="hdr_lnk">
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_ctr {display: block; text-align: center; font-size:0.8em; position: absolute; height: 24px;margin: auto;}
.hdr_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
What I am trying to do is have the text (address links) appear horizontally centered with margins to each side of the UL's. It's not working and the text and UL's all goes to the left as in this:
fiddle
Is there anyone who could tell me how I can get the UL's to appear in the middle of the page.
thanks
I'm not quite sure of the context that you're putting that code in, but this should achieve the effect you want:
#ftr_ctr {
width: 100%;
text-align: center;
font-size:0.8em;
position: absolute;
height: 24px;
}
.hdr_lnk ul{
margin: auto;
}
.hdr_lnk li {
display: inline;
padding: 0;
}
The main things you needed were the width: 100%; rule in the #ftr_ctr element and the margin: auto; rule in the .hdr_lnk ul rule. (The width doesn't have to be 100%, but it needed to be set to stop the element from shrink-wrapping its contents). margin: auto; will centre contents equally vertically or horizontally or margin: 0 auto; will centre contents horizontally.
Related
When I am trying to center div like
.div {
display: block;
width: 288px;
position: relative;
margin: 0 auto;
}
It is centered, alright, but I don't have that box around div when I am inspecting element in Chrome, and my div shows at top of the page on chrome, inside inspected element.
If I float it left than I will get that box, but centered with margin, no.
How to fix this?
Are you looking for this kind
.container {
width: 960px;
margin: 0 auto;
}
.center-div {
display: block;
width: 288px;
position: relative;
margin: 0 auto;
min-height: 100px;
background: #000;
}
<div class="container" >
<div class="center-div"></div>
</div>
My footer and its content do not re-position proportional to each other when I reduce the height of the footer.
CSS code:
#footer {
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right;
height: 5px;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 5px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 5px;
}
And this is what I am getting:
Anything I should do to resolve this?
Remove height and add overflow: hidden:
#footer
{
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
overflow: hidden;
}
<div style="clear:both;"></div>
just before footer div ends and also try removing height from footer
Well, you're not adding any context and any HTML markup. But this is important:
#footer {
clear: right; /* why are you doing this? **/
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right; /* why are you doing this? **/
height: 5px;
}
take a look at those commented lines, which quite probably you don't need at all.
Now, into your issue, you can use two options:
1) clear floats by using the "clearfix" method: simply add an empty div that clears the floats of preceding elements, like this:
<div class="clearfix"></div>
and then in CSS:
.clearfix{clear:both; float:none;}
Obviously you can use this as many times as you want since you're using re-usable classes.
The option 2 is as follows:
#footer p.right:after {content:'';clear:both; float:none; }
What we do here is to add some "empty" content, yet we assign it a "clear:both" property to clear everything, more or less as if we have added that div in option 1
Of course option 1 is way better, but well, there you go
You're using float to position elements, which means that the height of the floated elements are set to 0, just like if you're using positioning: absolute. DON'T use floats! Use flex.
#footer {
background: #d1dceb;
padding: 20px;
width: 70%;
display: flex;
margin: 0 auto; /* center element */
}
#footer p {
flex: 1 1 auto; /* fill up the entire available space */
}
#footer p.right {
text-align: right;
}
<div id="footer">
<p>Left footer element</p>
<p class="right">Right footer element</p>
</div>
I don't really even know what my problem is anymore, but I'll try to explain it as best as I can.
Basically what I have is a two column layout. On the left is the content, which at present only contains a h1 and filler text. On the right is the sidebar which should have a div in it (userinfobox).
The header text of the box is supposed to be outside the box a bit so I have the userinfobox position: relative and the header text position: absolute
Then, under that inside the box, there is a 150x150 image and then some more text below that.
Here's the HTML:
<!-- Main Content -->
<div id="contentwrapper" role="presentation">
<div id="content" role="main">
<h1>Header</h1>
Content link
</div> <!-- content div -->
<!-- Sidebar -->
<div id="sidebar" role="complementary">
<div id="userinfobox">
<p id="header">User Info</p>
<div id="userinfo">
<div id="avatar"><img src="" id="tag" alt="tag" /></div>
<p class="username">Username #</p>
<p id="icons">Icons</p>
<p id="membersonline">Online Members (#)</p></div>
</div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
</div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->
And then the CSS
/* Main Content */
#contentwrapper {
min-height: 400px;
height: 100%;
position: relative;
display: table;
font-size: 1em;
}
#content {
width: 669px;
height: 100%;
padding: 20px;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
}
#content h1 {
margin-bottom: 20px;
font-size: 2.75em;
line-height: 1em;
}
/* Sidebar */
#sidebar {
width: 234px;
height: 100%;
padding: 20px;
position: relative;
color: #0D130D;
background-color: #FDEBCF;
display: table-cell;
text-align: center;
}
#sidebar p#header {
position: absolute;
top: -10px;
font-size: 1.5em;
line-height: 1em;
text-align: left;
overflow: hidden;
}
#sidebar p {
max-width: 214px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
/* Logged In Sidebar */
#userinfobox {
width: 214px;
max-width: 214px;
padding: 10px;
position: relative;
background-color: #F7F8F7;
}
#avatar, #tag, #userinfo {
margin: 0 auto;
position: relative;
display: block;
outline: 1px solid #000;
overflow: hidden;
}
#avatar, #tag {
width: 150px!important;
height: 150px!important;
}
That should be working, I don't see any reason why it wouldn't be; actually it is working, the sidebar anyway is doing what it's supposed to. But sometimes it pushes down the content (currently the h1 and two words of text), almost to where the bottom of the 150x150 image would be.
I'll attempt to list the conditions that cause it to do this:
It does not work when:
the avatar div is completely empty and the header is position: absolute
the image has a src and the header is position: absolute
But, it does works when (seemingly regardless of absolute positioning of the header):
the src of the image is empty
there is no image, just text, in the avatar div (ie. just text in the entire userinfo div)
the userinfo div is completely empty
I just don't understand how it's affecting something in a completely different div. Every place I've tried to search about this just talked about how absolutely positioned elements inside a relatively positioned element won't affect anything outside and how to use them. Also, this is a fixed width setup, so it's not like the width is changing at all; it is also not based on percent.
Since your #content div is using display:table-cell;, you must also apply vertical-align:top; to prevent your content from centering:
http://jsfiddle.net/R8zAw/3/
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
border-bottom-left-radius: 5px;
vertical-align: top; /* add this */
}
For some reason, I cannot center the .logo class with CSS.
I've tried margin:0px auto.
Am I overlooking something?
Thanks.
CSS:
.full {
width: 100%;
height: auto;
float: left;
clear: none;
position: relative;
display: block;
}
.logo {
width: 230px;
height: 117px;
float: left;
clear: none;
position: relative;
display: block;
margin: 10px auto 15px auto;
padding: 0;
}
HTML:
<div class="full">
<figure class="logo"></figure>
<figure class="x-button"></figure>
</div>
Remove the following:
.logo {
float: left;
}
You cannot directly center a floated element via margin:0px auto;. If you want an element to be floated and center, you can always apply the margin to the parent while the child itself keeps the float. An example of this can be seen here.
Keep in mind, if it is just text you are trying to center, you can always just use: text-align:center;
Remove float: left; for .logo. float: left makes it align to the left.
Click here for a demo fiddle.
At least in this case, you can not center a floated element horizontally.
Here is a minimal example: http://jsfiddle.net/tJ5N3/
You can remove the floating, as others said above.
Also, as a workaround, you can wrap your element with a div that is horizontally centered. In this case, your can keep your floating, if it is necessary.
Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on
this problem.
90% of the answers and books give this background trick which didn't help me.
My code - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
And I want it to look like this:
I followed this guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
Try something like this:
FIDDLE
Markup:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}