I'm wrapping an image caption under an image. There are many pairs of these images and captions.
<div class="book">
<img alt="cover"><br>
<div>
<b>Title of Book</b><br>
Some extra info, maybe.
</div>
</div>
.book {
display: table;
float: left;
}
.book img {
height: 300px;
}
.book div {
display: table-caption;
caption-side: bottom;
text-align: center;
}
JSFiddle. I float the tables left to line each row up against the side of the screen. One of the boxes gets caught because the height of the box to its left is more than the height of the others.
How can I make each row of boxes line up with the left side of the screen?
It should look something like this, just with the ability to adapt to different caption heights without an explicit global height.
I set all of the images to a constant height, but I don't know their widths. There also might be a long caption, so I need that to wrap to the image width. I've tried
setting .book div to a constant height, but that doesn't adapt to a tall caption (JSFiddle)
using a flexbox, which works, but I'm looking for something simpler.
Add clear:both; to you book class
Like so:
.book {
display: table;
float: left;
clear:both;
}
I added a container and a new class, see working FIDDLE
.clear{clear:both;}
Related
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
On the site I'm currently coding I have a centered DIV containing a float left column and a smaller float right column. This works fine.
In the Left floating column, I have a further float left column, containing an bio image, and a float right text column containing the bio text.
However, I am at the point of throwing my computer out of the window because the last two bio divs are sitting on top of each other, with the text underneath the photo instead of floating next to it.
I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.
The page in question is here: http://test.phantomlimb.net/about.php and the CSS is here: http://test.phantomlimb.net/phantom.css
I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and *gasp!* accomplish the same effect using tables in around 3 minutes!!!
PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.
Did you try this?
Add float: left; to your .bioleft class in phantom.css
Alternatively add float: right; to your .bioright class
You are missing colons in your css file. e.g. you have
.bioleft {
float left; /* HERE */
width: 25%;
background: red;
display: block;
}
.bioright {
float right; /* AND HERE */
width: 70%;
background: cyan;
display: block;
}
You should have float: left; and float: right;
IT is because of improper syntax you have float left; it should be float: left;
Have you considered using floated divs for the container left and right divs, then just use inline blocks for the divs inside the floated divs?
<div id="left">
<div id="img"></div>
<div id="content"></div>
</div>
And
#left {
float: left;
}
#img,#content {
display:inline-block;
}
#img {
width: 100px;
}
#content {
width: calc(100% - 100px);
}
That should put the image and the content side by side, but they will be treated as a block div.
You could actually put both the image and content divs inside their own container div and name that biog as the id, to create its own 'block'
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I need to create a one-lined 2-column layout. The first column should display a potentially lengthy string, truncated so that it fits in the one-line layout. Similary to How to Create Automatically Expanding Block I did the following:
HTML:
<div class="container">
<div class="left">Lengthy string</div>
<div class="right">Short</div>
</div>
CSS:
.container {
white-space: nowrap;
overflow: hidden;
}
.left {
overflow: hidden;
}
.right {
float: right;
}
In contrast to this solution I would like the right column not to be on the far right but directly behind the content of the left column.
Any ideas how this could be done?
EDIT:
Example to clarify what I mean with 'directly behind':
'Lengthy string' may be a category in an online shop, 'Short' may be a number of available items in this category. Since category name + number may be wider than the width of their container the category names might need to be truncated, e.g.
<div class="container">
<div class="left">Electronic equipment for consumer</div>
<div class="right">(599)</div>
</div>
should be rendered as
Eletronic equipment... (599)
With directly behind I mean that for short category names, say 'Books', this should look like
Books (29)
and not like
Books (29)
I'm not positive I understand what you mean by "directly behind", but I think this may be what you're after:
.left {
overflow: hidden;
display: inline;
}
.right {
float: right;
display: inline;
}
Making the <div>'s inline will eliminate the need for floats, generally making your life easier.
You will have to assign a fixed width or, if your browser supports that, a maximum width for this to work.
The way you defined it right now, the browser is free to make the left element as wide as it wants.
You should also consider to float left on the left and not float right. Or use display: inline for both and don't float anything.
The below CSS creates a one-line 2 column layout
#wrapper { display: table }
#wrapper > div { display: table-cell; }
#wrapper > div:first-child { min-width: 200px; /*Using min-width allows expantion */ }
#wrapper > div:last-child { min-width: 200px; }
#wrapper > div p { white-space:nowrap; } //One line text
<div id="wrapper">
<div><!-- Left menu? --></div>
<div><p>very long text very long text etc..</p></div>
</div>
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.