I'm trying to make a footer as said here: http://css-tricks.com/left-align-and-right-align-text-on-the-same-line/
The problem is the 2 paragraphs are placed a bit under the footer, as if they where not defined in the div. Here is my code:
<div id="footer" style="clear: both;">
<p class="alignleft">left</p>
<p class="alignright">right</p>
</div>
css:
div#footer{
height: 20px;
padding: 0px 10px;
line-height: 20px;
clear: both;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Use overflow: hidden; on the container div to clear floats an don't use height
Demo
CSS
div#footer {
padding: 0px 10px;
line-height: 20px;
overflow: hidden;
}
height value should be auto
CSS
#footer{
height: auto;
padding: 0px 10px;
line-height: 20px;
**word-wrap: break-word;**
}
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I am having trouble putting 3 img's one on top of the other on the left side of my page and floating text to the right. I have been stuck for 2 days now and I have to fix this without changing the HTML.
My CSS is
img{
width: 30%;
height: 240px;
border: 3px solid #0066ff;
margin: 5px;
}
.left{
float: left;
margin: 0 auto;
}
.right{
border: 5px solid #00008b;
padding: 10px;
width: 40%;
height: 375px;
display: inline-block;
float: right;
}
HTML can be found at https://jsfiddle.net/MyTheoryIs/ggw7xy5s/#
What you need to do is float the 2 parent divs .left & .right instead of the content inside of it.
This also eliminates the need to have the images 30% width.
CSS:
img{
max-width: 100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.left {
width: 60%;
float: left;
}
.right{
padding: 10px;
width: calc(40% - 20px);
float: right;
}
NOTE: Using floats overwrites the display property (unless you are using display:flex)
Here is the working fiddle: https://jsfiddle.net/ggw7xy5s/3/
Maybe you are after a solution like this:
.left, .right{
box-sizing: border-box;
}
.left{
width: 30%;
border: 3px solid #0066ff;
margin-right: 1%;
float: left;
}
.left a{
display: block;
line-height: 0;
margin-bottom: 5px;
}
.left a:last-child{
margin-bottom: 0;
}
.left a img{
width: 100%;
height: auto;
}
.right{
border: 5px solid #00008b;
padding: 10px;
width: 69%;
height: 375px;
display: inline-block;
float: right;
}
<main>
<aside class="left">
<a><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg"></a>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"></a>
<a><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"></a>
</aside>
<section class = "right">
<h2>Watch your Head </h2>
<p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
<p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
<p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
</section>
</main>
I am having a CSS issue, I have a div called 'current-property' and inside this div, I have a paragraph. What I am trying to do is what this paragraph at the bottom of the element at all times. Is this possible?
.current-property {
padding: 50px 0px 50px 0px;
clear: both;
min-height: 460px;
}
.current-property p {
float: left;
padding-left: 50px;
}
p {
text-align: left;
font-size: 18px !important;
font-weight: 400;
padding: 10px 0px;
color: #333;
line-height: 1.8;
}
.current-property img {
float: left;
width: 28%;
}
.current-property h2 {
float: left;
width: 60%;
text-align: left;
padding-left: 50px;
font-size: 32px;
}
.current-property ul {
padding-left: 80px;
list-style-type: disc;
padding-top: 10px;
}
.current-property ul li {
padding-bottom: 10px;
}
<div class="current-property">
<img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
<h2>123 Fake Street</h2>
<div class="property-info">
<ul>
<li>Location: Oakland</li>
<li>Up to 22,000 Sq. Ft.</li>
</ul>
<p>Call for Availability: 555-555-5555</p>
</div>
</div>
You can do this with positioning. Set the position on the div to relative, and absolute on the paragraph (background color added to visualize the div's space).
.current-property {
padding: 50px 0px 50px 0px;
clear: both;
min-height: 460px;
background: #ccc;
position: relative;
}
.current-property p {
float: left;
padding-left: 50px;
position: absolute;
bottom: 0;
}
p {
text-align: left;
font-size: 18px !important;
font-weight: 400;
padding: 10px 0px;
color: #333;
line-height: 1.8;
}
<div class="current-property">
<img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
<h2>123 Fake Street</h2>
<div class="property-info">
<ul>
<li>Location: Oakland</li>
<li>Up to 22,000 Sq. Ft.</li>
</ul>
<p>Call for Availability: 555-555-5555</p>
</div>
</div>
If I understand what your question is, you can just add display:blockto .property-info p like this:
.property-info p {display:block;}
This makes sure that it will take up the full width of the screen, and no elements will float or be inline to it.
EDIT
Add it to the p tag
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show
Just have a small css problem...
I have a couple of divs within a div that's all contained within a wrappe,
ie
<div wrapper>
<div bodyWrapper>
<div bodyLeft></div>
<div bodyRight></div>
</div>
</div>
That's not all the code, there is extra between all of them but the problem is with the css. I have the main background of the wrapper set to black and all the rest set to white. The body(left & Right) tags both come up white but the bodywrapper tag sees to have no effect so there is black space under the body tags if they dont have the same length. is there anything i can do to sort it?
here is the css code
#wrapper #bodywrapper {
border: 20px solid #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
height: auto;
width:auto;
}
#wrapper #bodywrapper #bodyleft {
margin: 0px;
height: auto !important;
width: 630px;
float: left;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
overflow: hidden;
}
#wrapper #bodywrapper #bodyright {
margin: 0px;
float: right;
height: auto;
width: 280px;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #FFF;
background-image: none;
}
Faux columns would work but if you're after a pure CSS method you can try equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
This may help, Faux columns: http://www.alistapart.com/articles/fauxcolumns/