I have an unordered list that has a bit of content and a button. The columns (LIs) will not always be the same height, but I want the button to always be at the bottom. I'm using the display: table / display: table-cell trick to keep the LIs the same height, however I can't get the button to align correctly. I want the button at the bottom, but I also want it to behave like the content does. Meaning I want it centered and to change it's width as the browser is resized.
Here's a fiddle that demonstrates the issue.
http://jsfiddle.net/mattymess/BBuqY/
This is a snippet of code showing how I'm doing the equal height...
.rewards .rewards-chooser {
margin: 0;
border-top: 2px solid #f4f4f4;
border-bottom: 2px solid #f4f4f4;
display: table;
width: 100%;
position: relative;
}
.rewards .reward {
width: 25%;
border-left: 2px solid #f4f4f4;
list-style: none;
display: table-cell;
}
Change position: absolute; to position: relative; in .rewards .reward .redeem class like this:
.rewards .reward .redeem {
position: relative;
bottom: 0;
box-sizing: border-box;
}
Just to knowledge: Your button is relative to something (your container), and not absolute.
To set the buttons in the same line, you should to define a height for the container scope. Something like this:
.reward-description {
height: 200px;
}
I made a clean example for you. To see, click here (jsFiddle).
Related
I have a HTML file which I cannot edit.
<section>
<h2>Section heading</h2>
<p>Paragraph text</p>
<img src="image.jpg" />
</section>
The design is asking for the photo to be in the top right of the section, which is easy if the image is the top child of section. Unfortunately the image in the supplied HTML is right at the bottom of the section in the HTML, so simply floating right won't work. With a little work I figured out how to absolute position a div while keeping it in the page flow by faking the flow with another floated element.
* {
box-sizing: border-box;
}
section {
position: relative;
outline: 1px solid #CCC;
}
div {
display: inline-block;
width: 140px;
height: 140px;
background-color: green;
border-radius: 100px;
position: absolute;
top: 0;
right: 0;
}
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 150px;
outline: 1px solid red;
}
h2 {
outline: 1px solid blue;
}
See https://jsfiddle.net/tnxhy0po/3/
Div - Using it to demonstrate an image in the fiddle.
Red outline - Right floated ::before pesudo element for
the header.
Blue outline - Header outline.
Silver outline - Section
outline.
Now for the problem.
The header contains the words "Meet the Owner, Julie" and Julie is meant to be on a separate line. If I limit the width of the header in order to do this, the floated spacer element gets contained in the width of the header, which means that text below it doesn't flow up to the image.
See https://jsfiddle.net/s7eke1gy/16/
I'm not sure how to make the image float in the top right corner of the section. Placing it there is easy but making it a part of the flow isn't.
Alternatively, the current float + absolute position solution would work if I could find some way to get "Julie" to move to the next line.
Edit: While testing I had set the section to a max width and forgot to remove it. The width of section is dynamic and as such 100%. I've removed the max-width property from the section in here and in the jsfiddles. Sorry for the confusion!
If I understand you correctly, you want to put Julie on a separate line and leave the text floating like on https://jsfiddle.net/tnxhy0po/1/
You can try to combine before and after pseudo elements, use :before to wrap h2
( move Julie to new line ) and :after to wrap paragraph.
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 25px;
outline: 1px solid red;
}
h2::after {
content: "";
display: inline-block;
float: right;
width: 10px;
height: 120px;
outline: 1px solid red;
}
You can see result on https://jsfiddle.net/s7eke1gy/13/
Hope I understand you and this can help.
http://codepen.io/leongaban/pen/qEzaNr
I have 2 columns, the first column on top section.tags-panel Is the column I'm trying to fix. I don't want the tag's to float like that until something else happens.
However I also need the default column width to be 240px. In order for me to create that pill button style feel, I had to put in float:left.
^ Thus this creates a problem where I have the pill tags looking correct, but floating wrapping when they should be lined up in a single column.
The column below section.tags-panel2 is the look I'm trying to achieve, however I'm cheating because I'm shrinking the width of the panel. The text in the tag pills should never wordwrap too.
How would you achieve this without it looking like:
CSS:
section.tags-panel {
width: 240px;
height: 100%;
background: #f7f7f7;
border: 1px solid #ccc;
overflow: auto;
}
section.tags-panel li { margin-right: 10px; }
.tag {
overflow: hidden;
float: left;
position: relative;
margin: 0 10px 10px 0;
padding: 5px 10px;
width: auto;
border: 1px solid gray;
background: #ccc;
}
Perhaps you could add
clear: both;
to the tags? This should separate them and keep them in a vertical line as no floating elements are allowed on the left or the right side of the div you specify to have the clear attached to.
I need help with making double vertical lines.
Here are styles:
.slide-container
{
text-align: center;
width: 25%;
}
.v-separator
{
content: "";
display: inline-block;
width: 0px;
height: 230px;
border-right: 1px solid #fafafa;
border-left: 1px solid #b4b4b4;
padding: 0;
position: relative;
top: 20px;
}
.v-separator has width 2px because of border and this causes the problem. I have tried to make .slide-container width a bit less than 25% (like 23.853%), but this is not the decision.
I have no idea how to implement this feature somehow else.
Btw I am using Foundation 5 and Compass.
fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/
The width:25% generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizing setting as shown below.
Note: Elements whose display is inline-block by default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: left instead of display: inline-block is also a good option.
#wrapper
{
width: 600px;
background: lime;
box-sizing: border-box;
}
.slide-container
{
text-align: center;
width: 25%;
display: inline-block;
margin: 0px -4px;
}
Demo
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
Hey I want to put that lower div box beside that upper box with details but when I try to position absolute it I goes down idk why (I made the parent div of all three divs as position rlative ) , how am I supposed to fix this or any other better way to do this .
Here is the screenshot -
http://www.findportugal.com/Untitled.png
Div Description
#user_panel - div around all the other divs ie parent div
#user_details - div with details on top
#user_photos - div with photo heading
#user_current - div at the lower part
CSS :
#user_panel
{
color: white;
position: relative;
}
#user_details
{
padding: 0 0 30px 0;
}
#user_details table
{
padding: 30px 20px 10px 30px;
border: 1px solid grey;
margin: 0 60px 0 40px
}
#user_details table tbody tr td#right
{
padding: 0 0 0 100px;
}
#users_title
{
padding: 20px 0 0 50px;
}
div#user_photos
{
width: 850px;
height: 230px;
border: 1px solid grey;
margin: 50px 0 0 40px;
padding: 0 0 20px 20px;
}
#user_current
{
border: 1px solid grey;
width: 320px;
position: absolute;
}
You want a div OVER another div and you are saying it should NOT OVERLAP which is not possible, instead decrease the size of upper div, use float: left; and this will let the div below shift besides the floated div
Also don't forget to clear floats, or you'll spend other 2 hours thinking what the hell is going on with the element positions as well as background color
And if you want to use position: absolute; than the div will overlap, so in this case, use position: relative; for the container element and than use position: absolute; with top right bottom left properties to set your element correctly.
Don't forget position: relative; else your absolute div will run wild in your page
I'm assuming you want to place that lower div box in the empty space to the right of the upper-left div box, and not actually overlapping the other box? If so, you would be better off using floats.
You haven't shown your html, so let's assume the upper-left box has an id of "details", the bottom box has an id of "current-pic", and the full-width box in the middle in your screenshot as an id of "photos". A starting point for building the layout would then be like the following.
EDITED: Sorry, I wrote the answer before you updated your question with your HTML. The code is rewritten below to show the ids in your original html.
The HTML could be:
<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>
The basic layout CSS would be something like:
#user_details {
float: left;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_current {
float: right;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_photos {
clear: both;
}
This doesn't account for any of the content inside the boxes, or spacing between the boxes, but the box-sizing rule will help you to maintain your layout and build up margins, padding, and borders without them breaking it.