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
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'm creating a page that looks like this:
Here is the code
body { min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#headlogo{
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;}
#header {
padding: 0;
background-color: #1565C0;
}
#header .section {
margin: 0 auto;
padding: 0;
width: 900px;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
background: url(./images/headernav.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color:#DEDEDE;
}
#body .section {
margin: 0 auto;
min-width: 800px;
width: 800px;
overflow: hidden;
background-color:#FFFFFF;
padding: 60px 100px 50px 100px;
min-height: 50vh
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
}
#footer .section {
margin: 0 auto ;
padding: 20px;
width: 800px;
overflow: hidden;
};
<div id="header">
<div class="section">
<img src="./images/headerlogo.png" width="340" height="110" alt="" title="">
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
The CSS is available here:
http://jsfiddle.net/85L448ds/
But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.
In other words, I'd like it to work something like:
Width = 800
If Width > Window_Width then
Width = Window_Width
If Content_Width > Width then
Width = Content_Width
Whereas height should be the greater of: Content_Height and Windows_Height.
Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.
I've tried setting the CSS min-width property to 800, but that makes the default width 100%.
I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...
I believe CSS Media Queries will resolve your problem.
Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.
For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:
#media (max-width: 768px)
{
#headLogo {
text-align: center;
max-width: 300px;
}
}
Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.
If you run snippet so at first time you can see button because your
window size is < 768px if you want see menu then see result in full page
for responsive site use width in % not in px.
and you can also use bootstrap for that.
body {
min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.smallButton{
display:none
}
#headlogo {
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;
}
#header {
padding: 0;
background-color: #1565C0;
width:100%;
height: 90px;
}
#header .section {
margin: 0 auto;
padding: 0;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color: #DEDEDE;
width:100%
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
width:100%;
}
#footer .section {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#media (max-width: 768px)
{
#header .section ul {
display:none
}
.smallButton{
display:block;
position: absolute;
right: 0;
top: 32px;
}
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 500px;
height: 700px;
position: relative;
}
}
#media (min-width: 768px){
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 800px;
height: 700px;
position: relative;
}
}
<div id="header">
<div class="section">
<a href="index.html" id="headlogo">
</a>
<button class="smallButton">---</button>
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
updated fiddle
You don't actually need media queries for that
html,
body {
width: 100%;
height: 100%;
}
will make body occupy all available space in window. It will shrink and expand with window re-size.
Hi and thanks in advance,
I am new to this so sorry at the outset if I have trouble explaining. I have a web page and a CSS sheet. The page has three images, one above the other on the left of the contents part of the page and I have a list to hold some text that should display to the right of each image, however the text is squashed up to just one character in width and flows down and overlaps the list items below rather than appear in a single line inline with corresponding image.
Here is the HTML & CSS:
<div style="clear:both"></div>
<div id="content">
<div id="subscribe">
<h3>Subscribe!</h3><br></br>
<ul>
<li id="phone">Call me via Phone</li>
<li id="email">Get Email Updates</li>
<li id="twitter">Follow us on Twitter</li>
<div style="clear:both"></div>
</ul>
</div>
</div>
#content {
width: 300px;
float: left;
padding-top: 20px;
}
#subscribe {
width: 300px;
padding-top: 20px;
}
#subscribe h3 {
font-size: 20px;
}
ul#subscribe li {
list-style: none;
display:inline-block;
width: 300px;
padding-bottom: 5px;
padding-left: 35px;
margin:0 0 10px 0;
}
ul#subscribe li a {
list-style: none;
font-size: 18px;
padding-left: 40px;
}
li#phone {
list-style: none;
background: url(images/phone.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
li#email {
list-style: none;
background: url(images/email.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
li#twitter {
list-style: none;
background: url(images/twitter.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
It's because you gave a width to your li, I made a fiddle here
Instead of giving a width to your li you have to resize the background-image
li#phone {
list-style: none;
background: url(http://fakeimg.pl/300/) no-repeat;
background-size: 36px 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
i have a Problem i have these Markup & CSS i wanted, that the H2 and the p Tag are one the same Line.At the moment the h2 is a little bit under the vertical Line.I wouldn't use margin or padding have anyone a Solution?
Thanks for your help.
.content-left {
float: left;
width: 50%;
}
.content-right {
float: right;
width: 50%;
}
.content-left, .content-right {
min-height: 10em;
padding-left: 2%;
padding-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.content-box {
border-bottom: 1px dotted black;
overflow: hidden;
min-height: 5em;
}
.content-box ul {
list-style: none;
}
.content-box ul li {
text-indent: -1.4em;
padding-bottom: .3em;
}
.content-box ul li {
text-indent: -1.4em;
}
.content-box ul li:before {
font-family: fontawesome;
content: "\f054";
float: left;
width: 1.4em;
margin-top: .2em;
color: #0062ae;
font-size: 1em;
}
.content-box ul {
padding: 0;
}
.content-box p {
font-weight: 300;
}
.content-box li {
font-size: .9em;
font-weight: 300;
}
.content-left h2 {
color: #0062ae;
text-align: right;
word-wrap: break-word;
}
.content-right p {
line-height: 1.5em;
}
<div id="main-content">
<div class="wrapper">
<div class="content-box">
<div class="content-left">
<h2 class="blue font-xs">...</h2>
</div>
<div class="content-right">
<p>..</p>
<p>...</p>
</div>
</div>
Your snippet doesn't work because you are missing to set box-sizing property in your CSS:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Take a look at this jsFiddle.
Without setting box-sizing property to border-box, the left and right paddings you added caused content-left and content-right divs to exceed 50% width. See this document for more details:
border-box: The width and height properties (and min/max properties)
includes content, padding and border, but not the margin
By default, padding is added to the width of a block element, eg. 2 divs with 50% width and a 1% padding become a total width of 102% - So you would need to set them at 49.5% width and 1% padding.
Alternatively, you can use box-sizing: border-box which makes the padding become part of the width, so 2 divs at 50% width and 1% padding will remain 50% width each, hence totaling 100%.
I have set the Box-sizing. Have a look i uploaded a full fiddle with all CSS Files.
http://jsfiddle.net/4pqzLk5f/
.content-left {
float: left;
width: 50%;
}
.content-right {
float: right;
width: 50%;
}
.content-left, .content-right {
min-height: 10em;
padding-left: 2%;
padding-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.content-box {
border-bottom: 1px dotted black;
overflow: hidden;
min-height: 5em;
}
.content-box ul {
list-style: none;
}
.content-box ul li {
text-indent: -1.4em;
padding-bottom: .3em;
}
.content-box ul li {
text-indent: -1.4em;
}
.content-box ul li:before {
font-family: fontawesome;
content: "\f054";
float: left;
width: 1.4em;
margin-top: .2em;
color: #0062ae;
font-size: 1em;
}
.content-box ul {
padding: 0;
}
.content-box p {
font-weight: 300;
}
.content-box li {
font-size: .9em;
font-weight: 300;
}
.content-left h2 {
color: #0062ae;
text-align: right;
word-wrap: break-word;
}
.content-right p {
line-height: 1.5em;
}
<div id="main-content">
<div class="wrapper">
<div class="content-box">
<div class="content-left">
<h2 class="blue font-xs">...</h2>
</div>
<div class="content-right">
<p>..</p>
<p>...</p>
</div>
</div>
HTML:
<div id="main" class="rounded-corners">
<div id="benefits">
<img src="/benefits-heading.png" style="padding: 30px;" />
<div id="corporateside">
<h1>Corporate Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
<div id="employeeside">
<h1>Employee Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS:
#corporateside { width: 420px; height: 100%; position: absolute; left: 0; padding: 20px; height: 100%; display: block; }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; position: absolute; right: 0; padding: 20px; height: 100%; display: block; }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
I have fixed this issue by removing the position: absolute; from each div. Also I removed the <div style="clear: both;"></div> between the two divs. Thanks for your help!
It's because your divs are set with position: absolute;. This removes the div from the document flow and so the containing element behaves as if the divs are not present for its layout.
I'm not sure exactly what you're going for, but if you want to adjust the position of the two divs, try position relative or examine their margins and padding. A CSS reset can be very helpful as a general tool for making consistent layouts, especially across browsers.
Here's a jsfiddle of my suggestion, showing the divs side by side and the container behaving as desired.
http://jsfiddle.net/wCnLZ/