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;
Related
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.
I have a <div> called "bottom" which holds 2 divs together. The 2 divs inside are "manufacturers" and "main" which are located side by side with each other. What I want is that the <div id="bottom"> must be auto resizable when either the two divisions expands (the <div id="main"> lists down all the available products that is why it also has an auto height). The problem is that when I use a float property or a "display: inline" property in the main and manufacturers divs it overrides the bottom div causing it not to expand.
here's my css code:
#bottom{
padding: 1.5em;
margin: auto;
margin-top: 3.7em;
margin-bottom: 5em;
background-color: white;
width: 67em;
height: auto;
}
#manufacturers{
padding: 1em;
width: 13em;
height: auto;
border: 1px solid #CFCFCF;
font-size: 17px;
float: left;
}
#main{
float: right;
padding: 0.5em;
width: 47em;
height: 10em;
background: blue;
position: relative;
display: inline;
}
In your case element with ID "bottom" collapsed because of elements inside have floats (left or right). You should use clearfix class with #bottom:
.clearfix: before,
.clearfix: after {
display: table;
content: " "
}
.clearfix: after {
clear: both
}
Answer to question about "clearfix"
#main{
display: inline-block;
}
you could try this:
#bottom{
width: 100%;
}
#manufacturers{
width: 50%;
}
#main{
width: 50%;
}
Add above css properties in your existing CSS stylesheet. Apart from it:
Expanding Downward to fit the content is the expected behavior. If you have specified floats somewhere in your style you may need to clear them.
<div style="clear:both"></div>
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
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