I can't keep my image grid from dropping to the next line when resized. I've tried a bunch of different appraoches, including using DIV tags instead of span.. I think it's when the text is dropping a line. Any ideas what's wrong? See gif of what the problem is:
imagejumpinggif
Here's the snippet:
CSS:
.house {
width: 23%;
padding: 0;
margin: 0;
text-align: center;
float: left;
display: block;
}
.house_container {
#include span-columns(12);
text-align: center;
min-width: 100%;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
}
.house_illustration {
width: 100%;
padding: 3%;
}
li {
list-style-type: none;
text-decoration: none;
}
.label {
display: block;
text-align: center;
overflow: scroll;
}
HTML:
<div class="house_container">
<span class="house"><img src="img/house1.gif" class="house_illustration"/>
<p class="label">0-2500 sq ft<br> $275 </p> </span>
<span class="house"><img src="img/house1.gif" class="house_illustration"/>
<p class="label">2501-3000 sq ft<br> $300 </p> </span>
etc.
It looks like the second row is getting caught on the 2nd house span on the top row while it's resizing. If this is the problem, this should fix it:
.house:nth-child(4n+1){ clear:left; }
https://jsfiddle.net/17e5asgk/
Related
Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:
This is what I'm trying to accomplish (made in PS):
http://puu.sh/ryXC9/7d82671ee0.png
What my results are so far:
http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).
The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):
.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}
<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
</div>
<div id="emailForm">
</div>
<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>
Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )
To get #social-content's width to be that of its content, use display: inline-block without a width defined.
If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:
#main-social {
display: flex;
justify-content: center; // Centers horizontally
align-items: center; // If you need to center vertically, as well
}
Well, I'm back to doing front-end stuff -- which is really not my forté -- and I'm stumped.
I have a div with a logo, and I need to put some text in-line with it, vertically centered within the div. Every time I try to float the element right, it seems to end up outside of the div (somehow?).
Relevant HTML:
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src="mylogo.png" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
...
</div>
Relevant CSS:
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#wrapper-header #header-logo {
margin-left: 20px;
padding: 10px 0;
}
#wrapper-header #header-logo img {
max-height: 40px;
vertical-align: middle;
}
#wrapper-header #header-customer-name {
vertical-align: middle;
}
What do I need to do to get this header-customer-name element to float right?
You can try using flex box:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
display: flex;
align-items: center;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
flex-grow: 1;
text-align: right;
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
or you can calculate an appropriate padding to your header-customer-name like this:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
float: right;
padding: 12px 0; /*you can change for a more precise value*/
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
Anyway if you're referring that the header-customer-name is outing on the right of the #wrapper-header that is probably because it has position: fixed and width: 100%, that's why I add the style:
html, body{
margin: 0;
padding: 0;
}
Check my answer here to better understanding White Space Appears Right of Browser Window When at Full Screen
This has no relation with the question but can help you
Don’t Overqualify
As a general rule, don’t supply more information than is necessary.
// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}
// good
#someid {..}
#otherid {..}
#id2{...}
Try in fiddle
Change style to this way..
#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px; /*value suits to your logo */
}
Do you have CSS reset code in CSS files which is linked with this page. After the is below css reset added, the problem was solved. Demo
html, body {
margin:0;
padding:0;
}
I need a div to be positioned at the top inside its containing div, and leave unused space below itself. The default behavior seems to be the opposite, e.g. the contained div falls down to the floor of its containing div and leaves unused space above itself.
I assume that's quite a trivial thing to do, but I don't even know how to search for the solution on Google (tried "div float top", "div gravity" and some other meaningless searches...)
Here is my html code:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And relevant css:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
}
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
}
.bonustext {
display: inline-block;
width: 70%;
}
The resulting layout is ok except the logo div (the one containing the img tag) that occupies the lower part of its containing div free space, while I need it to "fight" gravity and stay with its top edge hooked to the container top edge.
Thanks in advance for any help.
Here is a slight modification using float instead of inline-block.
Seems to work OK:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And CSS:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
height: 100px;
border: 10px solid red; /* test */
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
clear: both;
}
.bonusbookmakerlogo {
float: left;
width: 20%;
}
.bonustext {
float: left;
width: 70%;
}
The answer by #Marius George works and I think it is the cleanest possible solution, but here his a different one I've found meanwhile:
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
vertical-align: top;
}
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
jsFiddle
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
Hobbs92
</b>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
jsFiddle
The best way to use is white-space: nowrap; This will align the text to one line.