I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
Related
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.
ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
border-bottom: 1px dashed blue;
}
#container > li {
font-size: 2em;
border-bottom: 1px solid black;
}
em {
float: right;
position: relative;
bottom: 0px;
}
span {
width: 100px;
display: inline-block;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
As you can see i am using relative position, but its not working.
Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.
First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.
Then I would make use of display:table css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
padding: 5px;
}
#container ul {
border-top: 1px solid black;
margin-top: 5px;
}
#container ul li {
border-bottom: 1px dashed blue;
display: table;
width: 100%;
}
#container span,
#container em {
display: table-cell;
vertical-align: bottom;
padding: 3px 0;
}
#container em {
text-align: right;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
UPDATE
As per your comments about overflow. There are a couple of ways to fix this:
Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example
You can add a class to the <em>
HTML
<ul id="container">
<li>DRINK MENU</li>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
</ul>
</ul>
CSS:
ul{
list-style: none;
padding: 5px;
margin: 0;
}
ul#container{
width: 18%;
min-width: 200px ;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange ;
box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}
#container li{
border-bottom: 1px dashed blue;
}
#container > li{
font-size: 2em;
border-bottom: 1px solid black;
}
em{
float: right;
position: relative;
bottom: 0px;
}
.bottom {
position: relative;
top:15px;
}
span{
width: 100px;
display: inline-block ;
}
DEMO
Another posible solution (maybe the best practice):
CSS:
li:nth-child(3) > em, li:nth-child(5) > em{
position: relative;
top:16px;
}
DEMO
Along with your questions, I've taken your comments into consideration in preparing this answer.
First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.
In answer to your first question...
how to position the prices at the baseline
... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.
Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:
To absolutely position a child element, set the parent element to position: relative.
Here's an example using your code.
DEMO
HTML
<!-- with corrections to improperly nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display: inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
In answer to your second question...
Just tell me why is relative position not working.
Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.
That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For more about positioning see the position article at MDN.
How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.
My HTML codes:
<div class="maincontainer">
<div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div>
<div class="microcontainers">
</div>
</div>
My CSS Style:
#maincontainer{
width:1120px;
height:auto;
background-color:#E4E4E4;
margin-left: auto;
margin-right: auto;
margin-top: 124px;
padding: 40px 40px 40px 40px;
overflow: hidden;
display:block;
text-align: center;
}
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
display: block;
margin: 0 auto;
}
Thank you and more power!
v Please try this, it may solve your problem.
There is some CSS changes.
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
text-align: center;
position: relative;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
position: absolute;
left:0;
right:0;
}
FIDDLE
Add text-align:center for the paragraph.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align:center;
}
Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this demo where I have added overflow: hidden to .design.
With your updated CSS, including text-align: center for .design you could either reduce the font-size, reduce the padding of .microcontainers or add negative margin on the <p> element
add
text-align:center;
in your design class
Just adding text alignment will fix it see this Fiddle
doing exactly what the above user suggested.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
}
but I don't see why you are doing this can you explain it..If you are doing a big project i suggest you use bootstrap
You can use center tags also
<div class="maincontainer">
<center><div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div></center>
<center><div class="microcontainers">
</div></center>
</div>
Basically I want to put the div tags below in the center of the page. How is this done in CSS? I am having such a hard time doing it what is the best option!?
HTML
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
CSS:
.tab-selected {
background: #FF00FF;
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #FFFFFF;
height: 15px;
display: inline;
}
.tab-unselected {
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #585858;
height: 15px;
display: inline;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 60px;
display: inline-block;
horizontal-align: center;
}
Wrap the class .tab-unselected in a seperate div whose properties would be -
.center { margin: 0 auto; float: none; }
Now -
<div class="center">
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
</div>
horizontal-align does not exist. Use text-align: center instead. To horizontally center the element itself, use margin: 0 auto;, which equals:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin:left: auto;
The automatic right and left margin results in a centered element.
If you want to vertically align an element, use vertical-align: center (this does only work on inline elements).
Wrap them in a <div style="text-align: center;"> (or use some other way to apply that style to a containing element).
Wrap them in a div
#center {
margin: 0 auto 0 auto; }
Then apply
<div id="center"> <YOURSTUFF HERE> </div>
I'm trying to re-create a few elements I've seen online and I've been using Element Inspector but can't seem to figure out why this a href element is loading outside of my modalHeader class.
Here's some HTML:
<div id="modalContainer">
<div class="fakeModal">
<div class="modalHeader">
<h2>Fake Modal Heading</h2>
x
</div> <!-- end modalHeader -->
</div> <!-- End fakeModal -->
And corresponding CSS (using Less)
#modalContainer {
width: 700px;
height: 250px;
background: gray;
padding: 1px; }
.fakeModal {
width: 500px;
height: 150px;
margin: 50px auto 50px auto;
border-radius: 3px;
//border: 3px solid black;
background: white;
}
.modalHeader {
h2 {
background: #dullGray;
border-bottom: solid 1px #EEE; //This makes so much of a difference!!!!
border-radius: 3px 3px 0 0;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
padding: 9px 15px;
}
a.close{
position: absolute;
top: 10px;
right: 10px;
color: gray;
text-decoration: none;
font-size: 18px;
}
a.close:hover {
text-decoration: underline;
color: gray;
}
}
Can anyone figure out why the x isn't rendering in the horizontal box I've defined in modalHeader?
#zack; you give position: absolute; to your a tag so, give position: relative; to your parent div modalHeader that's work for you .
CSS:
.modalHeader {position: relative;}
for more read this article http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
You've set the link to be position absolute, not relative to it's parent container. Remove the position, and change the top and right to margins.
An absolute position always refers to the element above which is positioned relative or absolute. If there isn't one, it refers to the body. Try to change position: absolute; to position: relative; or define the modalHeader as position: relative;.