im attempting to make a grid-style Tumblr theme using inline-block, but there have been some... complications. The posts are automatically aligning with each other vertically. That wouldn't be a problem if they were all the same dimensions, but the posts vary between heights. To sum it up, Im looking to create two columns of posts [of varied heights] that do NOT have any kind of vertical alignment. I've tried a number of different solutions, but nothing seems to work.
The first link is the JSFIDDLE.
This is how it currently looks versus how I would like it to look.
CSS
#entries {
width: 600px;
{block:PermalinkPage}width: 630px;{/block:PermalinkPage}
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
}
.posts {
position: relative;
text-align: left;
background: {color:Posts};
width: 250px;
{block:PermalinkPage}width: 500px;{/block:PermalinkPage}
margin: 20px;
padding: 0px;
word-wrap: break-word;
display: inline-block;
clear: right;
}
.posts nth-child(even) {
float: right;
}
Any tips or possible alternatives would be excellent because I cannot for the life of me figure this out. Im starting to think the vertical alignment is just inherent to inline-block?
Only css is hard but you can use a javascript plugin gridalicious here is the link to github https://github.com/suprb/Grid-A-Licious
<div id="container">
<div class="item">
<img src="../">
<p>Text </p>
</div>
<div>
Here an example http://jsfiddle.net/wqfoku85/
Related
I have two minor issues that are driving me nuts.
1) If you visit my site, Stork,you can see that the 3 steps showing how it works and the 3 questions at the footer are aligned to the left. I want them to be centered on the page but I must have missed something because margin: auto; isnt working.
Can you please help me center them?
Here is the HTML & CSS for the Steps:
<div class="panel">
<div class="title">Step 1: Schedule</div>
<div class="steps">
<p>Schedule a pick up and dropoff with our easy form and let us take care of the rest.</p>
</div>
</div>
.panel {
display: inline-table;
margin: 0 auto;
padding: 50px;
width:200px;
height: 180px;
line-height: 1.5;
}
And for the questions:
<div class="cbox">
<div class="ctitle">How Can I Pay?</div>
<div class="cblurb">
<p>Full payments can be made upon delivery using credit cards only.</p>
</div>
</div>
.cbox {
display: inline-table;
margin: 50px auto;
padding: 50px;
width:200px;
height: 100px;
line-height: 1.5;
color: #424242;
margin-top:60px;
}
2) On a minor note, I am trying to connect the words in the navbar with their respected div classes using the format href="/.contact", but i keep getting an error. how do i fix that?
Thank you!
Add text-align: center; to the panel's parent div, that should center your "inline" elements.
If you don't want the contents of the panel to be aligned that way (they will inherit the alignment), add text-align: left to the panel's styling.
Update
Regarding the second part of your question - you cannot link to an element just using its class (not without javascript, and deciding which element from the collection returned is the one you want as classes are not unique).
An id, however, is unique and can be linked to with Link
I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle here that illustrates my problem.
On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)
I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
<div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)
The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.
Could someone help me out please?
Thanks,
YM
To me it's a vertical alignment issue. You can try
.banner {
display: block;
width: 100%;
}
div {
height: 10px;
vertical-align: top;
}
That way you don't have to use negative margins (which aren't wrong, just controversial practice).
Check it out here
you can make the position relative and then set the top to something minus. ex:
position: relative;
top:-10px;
left:0px;
this is actually float problem
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg">
<div style="">
<div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
css
.banner {
width:100%;
float:left;
}
http://jsfiddle.net/eLbUU/4/
using display block and floating the divs, also making sure the img itself is display block with overflow hidden I was able to tighten up the stripes to the img : fiddle
.banner {
width:100%;
display: block;
overflow: hidden;
}
div div{
float: left;
}
First of all, put the darker brown in the lighter brown div. That way, when the window is re-sized, you don't compromise the sizing percentage and/or spacing.
<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>
And with the space, you can either use negative margins or floats like others have mentioned.
.banner {
width:100%;
/* margin-bottom to the banner is negative which moves the div upward */
margin-bottom: -10px;
}
fiddle here
Putting display: block; for the image class and float:left; for all other elements may help.
.banner {
width:100%;
display:block;
float:left;
}
http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Sorry Wrong Link)
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)