I have this code here:
https://jsfiddle.net/pj1zmL6j/
I'm trying to get the loginbox to stay on the same Y as the logo. I've tried different ways with float and display-inline and other results I've found with google, but when setting float or display:absolute on the logo, it disappears to the left instead(but the logobox doesn't get pushed down)
Code:
#top {
width: 100%;
}
#head {
float: left;
width: 694px;
margin: auto;
text-align: center;
}
#user {
width: 25%;
float: right;
margin: 0 25px 0 25px;
border: 1px solid white;
display: inline-block;
}
<div id="top">
<div id="head">
<h1>logo</h1>
</div>
<div id="user">loginbox</div>
</div>
Try adding
display: flex;
align-items: center;
To the #top id
Example : https://jsfiddle.net/zpo4gf75/2/
Edit
I tried making the Logo stay in the center all the time.
Check the fiddle: https://jsfiddle.net/tksL54g0/2/
The problem is your use of fixed and dynamic widths (percents).
Here is an example of only use percents to achieve your goal: https://jsfiddle.net/v1wvyc1v/
#top {
width: 100%;
}
#head {
float: left;
width: 75%;
text-align: center;
}
#user {
width: 25%;
float: right;
}
When you have a fixed width, fixed margin and fixed border sizes added you will run into issues. All of these were causing your login box to wrap below.
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
check out this static tempalte from https://github.com/kybernetyk/medstime/tree/master/src/medstime/static
the page that I'm having trouble with is
https://github.com/kybernetyk/medstime/blob/master/src/medstime/static/plans-pricing.html
Inside the <aside> tag, when you try to increase the number of items, the <div class="grid">
stays fixed in height and size!
I've literally tried everything from setting height on it but it is impossible to grow the container as I add more content inside it.
I apologize in advance if you have already tried this. But I looked in the CSS code under saas-common.css and found this:
.grid aside {
width: 125px;
float: left;
padding-top: 110px;
text-align: right;
}
.grid aside li {
line-height: 51px;
font-size: 14px;
}
.grid .sections {
width: 782px;
height: 511px;
background: url(../images/bg-grid-box.png) no-repeat left top;
float: right;
}
.grid section {
float: left;
text-align: center;
height: 509px;
}
Looks like there are some fixed heights under the grid div. You could try overriding with !important.
A few things to try from there:
min-height: 500px;
height:auto;
Then,
overflow:hidden;
And if all else fails,
position:absolute;
Link to site
/*Align width 1170px*/
.align-1170{
height: 100%;
width: 1170px;
margin: 0 auto;
}
/*Align vertically*/
.align-vertically{
height: 100%;
display: table;
}
/*Header*/
header{
height: 60px;
width: 100%;
background-color: #1ccb56;
}
.logo{
display: table-cell;
vertical-align: middle;
}
.author{
float: right;
display: table-cell;
vertical-align: middle;
}
Why Can't I use float:right; to move "Author: projekcior.com" to right side
(with vertically alignment)?
Why my h3 tag is so wide? (650px)
Thanks!
An element that is floated is automatically display: block;
use
h3 { display:inline-block; }
to manage your h3 width.
Let me answer your question in steps.
Why Can't I use float:right; to move "Author: projekcior.com" to right side (with vertically alignment)?
Maybe because, you're not setting the margins to it. It actually is to the right side of the web page. I just tried to use margin for it.
p.white {
margin: 20px;
}
Using this, it came down a bit from the top corner.
Why my h3 tag is so wide? (650px)
Because you've not set any of the width: value to the element, so browser would automatically set the width. I used width property to minimize the size.
h3 {
width: 200px;
}
Here is the screen shot for your page.
Hey Komon i guess you didn't write a proper css for your webpage so i tried to correct your page see the mentioned below CSS :-
CSS
.align-vertically {
border: 1px solid;
}
.align-1170 {
height: 100%;
margin: 0 auto;
width: 1170px;
}
.logo {
float: left;
}
h3 {
border: 1px solid;
display: inline-block;
font-family: 'Lato',sans-serif;
font-size: 1.5em;
}
.author {
float: right;
}
see the css and try to understand where u made mistake actually your parent div were not floated that's why your child div are not in control....
apply this css i guess through this you will achieve your desired results...
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I have a float element on the left side on my page.
Now after this float, I want to center the rest of the content.
Please see here: http://jsfiddle.net/ETm93/13/
This is what I have now. I did float: left. I can do float: right to get it to the right side, but how should i get it centered of the space that is after the floated element. Example:
IMAGE (that is floated) | stuff here in middle |..
How can I do that?
Use text-align: center and display: inline
#profile_leftPanel{
width: 150px;
float: left;
border-right: 1px solid #666;
margin-right: 20px;
}
#profile_rightPanel_center {
margin-left:auto;
margin-right: auto;
text-align: center;
}
#recentStatus{
width: 400px;
text-align: center;
display: inline;
}
See http://jsfiddle.net/adamzr/QbMmX/
Have you tried changing
#profile_rightPanel_center {
float: left;
}
to
#profile_rightPanel_center {
text-align: center
}
For text only, use
text-align:center;