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...
Related
I want to place two pictures at the same place on the webpage - to overlay each other (later on I'll add some webkit animations for them to move in two different directions, but the startpoint should be the same). I have the following css layout (here's jsfiddle). The CSS here looks like this:
.intro{
background-color: #b0e0e6;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.intro:before,.intro:after {
content: " ";
display: table;
}
.intro:after {
clear: both;
}
.image{
width: 50%;
background-color: #aaaae6;
float: left;
}
img{
margin: 0 auto;
display: block;
}
.text{
width: 50%;
background-color: #cccccc;
float: left;
}
as you can see in the fiddle, now two pictures are one below the other, so I've decided to modify the css and add this:
img{
margin: 0 auto;
display: block;
position:absolute;
left: 10%;
top: 25%;
}
but that causes the not visible at all... How can I preserve the size of that div and just put two images directly in it?
As a starting point for consideration: in CSS3, a single element can have multiple, stacked background images. Example:
.my-container {
background:
url(grid.png),
url(building.jpg)
}
Here's a codepen.
In CSS2 and below, you can use z-index, absolute, width, and height etc.
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;
I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.
Thank you for any assistance / correction in how I achieve this.
You need to define width for the divs:
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
Updated Fiddle:
http://jsfiddle.net/bss6mc5a/3/
Update 2:
http://jsfiddle.net/bss6mc5a/7/
Instead of trying to float your elements left or right, you can just set fixed location objects.
I updated your JSFiddle to do what I'm thinking will help.
Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:
margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */
But check out the Fiddle, see if that helps.
check this out I thing this what you want click Demo
Some changes in CSS
#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}
Hope this will help you...
give your body divs a display: inline-block;
http://jsfiddle.net/bss6mc5a/5/
#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}
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>
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/