I have something similar to this
.col {float: left; width:190px;border: 1px solid red;}
<div class="col">
<p>some text goes here some ass sasass here </p
</div>
<div class="col">
<p>some text goes here</p>
Link
</div>
So the text on the first div is quite long where as the text in the second div is not. So the first div gets taller than the second div.
What I want to achieve is leave the text in the second column as it is but vertical align the link to the bottom to match the left's div height.
Does that make sense?
Thanks
Look at this example:
http://www.ejeliot.com/samples/equal-height-columns/example-6.html
added:
you should take out the element that you want to put on the bottom.
<div class="col">
<p>Lorem ipsum dolor 1</p>
</div>
<div class="bottom"></div>
<div class="col">
<p>Lorem ipsum dolor 2</p>
</div>
<div class="bottom">
link
</div>
Related
Screenshot
Please refer to the attached screenshot. How to position the text "Arunraj" to the top of div(blue box). Now it automatically goes down.
Here is my code:
<div>
<span class="profile-pic"></span>
<span>
<div>
<h3>Arunraj</h3>
<p>Lorem ipsum dolor simet</p>
</div>
</span>
</div>
Using bootstrap I created three columns, each containing an image and a caption. Like so:
However, I want it to actually output the content like this:
This is my current code:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
And here is the related CSS code:
.cssSection {
padding: 45px 0 30px;
}
.cssCenter {
text-align: center;
}
.cssInformation {
font-size: 18px;
}
What can I adjust within the HTML and or CSS to make the p tags align horizontally, without affecting the images?
Are you sure there is no other css you might have added? I tried your code on jsfiddle (adding bootstrap) and it shows up fine for me.
Here everything is fine in plunker. Please provide your whole html file to help us inspect your issue.
Your code works well in bootstrap3.3.4.
Check your bootstrap version.
as you can see on this jsfiddle, if you play with the window size, the lorem ipsum text sometimes goes outside the white container.
I can't figure out why, because when I look at the code, everything seems to be embedded within the main container so I would expect the text to adapt the fluidly adapt to the window size.
What is the issue?
Thanks,
<section>
<div class="container content">
<div class="row">
<div class="col-md-3 bordering">
<h2>Qui <b>sommes-nous?</b></h2>
<h3>Actifs depuis </h3></div>
<div class="col-md-9">
<div class="title-block">
<p>
Lorem ipsum dolor sit amet, connecteur adipiscin
<p>
etc.
It is because you have applied a fixed width to .container:
.container {
width: 1260px; /* remove or edit this line */
}
I am attempting to show a thumbnail picture and below the thumbnail, I want to have some text. Ideally I think I want to wrap the image and the text in a div whose style is set to be inline.
So imagine 3 pictures going across the screen from left to right and underneath each picture is a description of the picture.
How do I accomplish that?
Im with seb nukem here. I would use display inline-block.
One way you could do this is by enclosing each image and description pair within a div element and then just floating those divs to the left.
DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE
HTML
<div class="gallery">
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
</div>
CSS
.gallery div {
float: left;
margin-right: 1em;
}
Put each image + caption within an inline or floating block:
CSS
div.image {
display:inline-block; /* or use float:left; */
}
.caption {
}
HTML
<div class="image"><!-- one div per image -->
<img src="image.png">
<div class="caption">Caption text here</div>
</div>
<div class="image">
<img src="image2.png">
<div class="caption">Caption text here</div>
</div>
...
demo: http://jsfiddle.net/5s5s4otc/
I would use the HTML <table> element. Try something like this:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
</tr>
<tr>
<td>Description goes here.</td>
<td>Description goes here.</td>
<td>Description goes here.</td>
</tr>
</table>
I hope this helps! Leave a comment below if you need additional help.
DEMO: http://jsfiddle.net/pwee167/67oc6k7r/\
The outcome will be something like this:
HTML:
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
CSS:
.container
{
float: left;
max-width: 128px;
}
Note: I assumed the dimensions of your thumbnails will be the same (as is in most use cases of thumbnails), which allowed me to set the maximum width (using max-width) of the container holding the image and the description. This will prevent the text from overflowing, and expanding the container.
Use either float or inline-block on the container divs. See jFiddle here: http://jsfiddle.net/ckk2jprr/
HTML
<div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
</div>
CSS
.pic{
float: left;
}
I'm building a Single-Page layout with a navigation for scrolling to several anchors (anchor locks on top of the page - height of the header). The scrolling content is only structured in headlines <h3> and paragraphs <p>. Works well so far, but the last section of the page is quite short, so it gets stuck on the page's bottom and has not enough "space/content" to even arrive at the top of the page.
Does anyone know a way to extend the very last <p> to the browser's height (- the header's height), so that it can reach the top?
CSS-only would be great, jQuery is fine aswell.
Thanks!
From your description you seem to have something like this, where I'm giving your "scrolling content" area an id of application-body like this:
<div id="application-body">
<h3 id="n-1">Headline 1</h3>
<p>Lorem ipsum </p>
<h3 id="n-2">Headline 2</h3>
<p>Lorem ipsum </p>
<h3 id="n-3">Headline 3</h3>
<p>Lorem ipsum </p>
<h3 id="n-4">Headline 4</h3>
<p>Lorem ipsum </p>
<h3 id="n-5">Headline 5</h3>
<p>Lorem ipsum </p>
<h3 id="n-6">Headline 6</h3>
<p>Lorem ipsum </p>
<h3 id="n-7">Headline 7</h3>
<p>Lorem ipsum </p>
<h3 id="n-8">Headline 8</h3>
<p>Lorem ipsum </p>
<h3 id="n-9">Headline 9</h3>
<p>Lorem ipsum </p>
<h3 id="n-10">Headline 10</h3>
<p>Lorem ipsum </p>
<h3 id="n-11">Headline 11</h3>
<p>Lorem ipsum </p>
</div><!--#application-body-->
And you want to make the last element in that list - the last <p> element in this case, artificially taller so it will work correctly. If I'm not mistaken I think what you want is this:
#application-body p:last-child {
color: red;
height: 1000px;
}
Which will increase the height arbitrarily as you see fit. Not sure what the constraints of your page are, but you could also experiment with other units. I don't think percentage height will do what you intend though. em might work as well. You might also consider setting the height with a media query so that if the height was not very tall you could set it lower.
Here's more about :last-child
If you simply must use jQuery or must get precise about the height you want, you'd want to use this chunk of jQuery. Note that your header must have an id of header for this code to work. Adjust to your own site.
var targetHeight = $(window).height() - $('#header').height();
$('#application-body p:last-child').height(targetHeight);