This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
I have read countless posts on this topic however I am yet to find a solution that works. I simply want to have two divs side by side with the LHS div being the width of the FA char and the RHS div being the remainder.
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
Not sure what you're trying to do but you could use something like Flexbox which is in the JS fiddle here.
Alternatively you could do something like this:
HTML
<div class="helper">
<div class="text-info">FA</div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
CSS
.text-info, .text-muted {
float:left;
}
.helper {
clear:both;
}
If you want both of them to have different widths, you can simply set the widths of each (using %, px or whatever).
Set display:table-cell to your content and icon will give the desired output. Check below snippet.
.inline {
display: table-cell !important;
width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
<div class="text-muted inline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
I believe this is what you're going for :
.text-muted {
display: table-cell;
}
.text-info {
padding-right: 10px;
display: block;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
See also this Fiddle.
Related
Given this HTML
<div class="flex">
<div>
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</div>
</div>
how can I make the image height scale automatically with the text div, according to browser width and font size of the text?
https://jsfiddle.net/msuL6pvx/ In this case the image has to be scaled down to have the same height as the text
https://jsfiddle.net/msuL6pvx/1/ In this case the image has to be enlarged to its max size (300x300) and not exceed those dimensions
I dont' think this is possible with pure CSS. The only think I could think of is using position: absolute for <img> to take it out of the flow in combination with max-height; then adjusting the margin of the text with javascript.
https://jsfiddle.net/zphb0fLd/
Hope it's useful.
Well as far as my knowledge, the image size can be increased with relative to text size, but its opposite case is not possible.
Here is my code. I use the flexbox to increase the height of the image as per text size. Let me know if it meets your requirements.
<div class="flex">
<div class="image-container">
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div class="text-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</p>
</div>
</div>
.flex{
display:flex;
flex-wrap:wrap;
}
.image-container{
flex:1;
}
.text-container{
flex:3;
}
.text-container p{
font-size:2em;
padding:10px;
}
.image-container img{
width:100%;
height:100%;
object-fit:cover;
}
Live example link: https://codepen.io/pranaysharma995/pen/JjdQWyQ
I am trying to recreate a design gotten from a UX Designer,
the design is was created for a screen size of 1440px, which is expected to be responsive across 992px, after much work trying to wrap my div around the image, this is what I get
The problem here is, is there a standard way to wrap div around the image for a perfect fit...
Below is my sample code
HTML
<div class="goal">
<div class="col-md-4 col-xs-12" style="padding: 0">
<img src="assets/images/image4.png">
</div>
<div class="goal-txt col-md-8 col-xs-12">
<h2>Vivamus quis</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus imperdiet ultrices. Proin at sagittis dolor. Nam nec ligula mi. Donec tortor purus, aliquet quis rutrum in, lobortis ut justo. Sed ultricies mauris a dignissim finibus. Curabitur feugiat, lorem eget congue suscipit, felis massa facilisis turpis, vel euismod dui turpis in odio. Aliquam ultricies pretium diam, sed ultrices odio posuere vitae. Donec commodo velit vitae nunc interdum, vitae ultrices dolor sagittis. Praesent tincidunt nibh at nisl cursus, eget commodo turpis dapibus. Fusce ac suscipit leo, at euismod velit. Curabitur consequat bibendum justo nec ultricies. Cras nec lacus eu dolor vehicula mattis. In hac habitasse platea dictumst.</p>
<ul>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
</ul>
</div> </div>
CSS
.goal-txt {
background: #F4F7FC;
padding: 32px 78px 86px 78px;
}
The issue is because you have an image of 713px height and your text content is less height. I would say give your goal-txt of the same height as your image. So that makes:
.goal-txt {
max-height: 713px;
overflow-y: scroll;
}
I have a div with a specific class name when a specific link is clicked I wanted to jump into the div. How can I achieve this?
HTML
<a class="my_link" href="#"> This is my link </a>
<div class="Home"> This is my target </div>
Thanks
you can do that with ids
<a class="my_link" href="#Home"> This is my link </a>
<div id="Home"> This is my target </div>
if you need you classes to stay:
<div class="Home" id="someId"> This is my target </div>
and just replace #Home in your link with #someId
just link to your page and put # behind the link
It works with Ids because the should be unique per page
Full example:
<a class="my_link" href="some-of-your-pages#Home"> This is my link </a>
You can do with this
<a class="my_link" href="#Home"> This is my link </a>
<div class="Home" id="Home"> This is my target </div>
$(".my_link").click(function() {
$('html,body').animate({
scrollTop: $(".Home").offset().top},
'slow');
});
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.Home {
width: 100%;
height: 1000px;
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"><a class="my_link" href="#"> This is my link </a>
</div>
<div class="Home"> This is my target </div>
Would you please check my above snippet?
try something like this, it utilizes jQuery, as an added bonus it has smooth scrolling
$(document).ready(function () {
$("a#smooth_scroll").on('click', function(event) {
var el = $(this)
var href = el.attr('href') // can be an id or a class
var nav_element_height = $(".navbar").outerHeight();
var target = $(href);
var target_offset = target.offset().top;
var offset = Math.round(target_offset - nav_element_height);
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: offset
}, 1000);
}
});
})
But as others have suggested, i would recommend utilizing ids for this purpose
An alternative would be to use jQuery, in which case you can just use classes. This would be handy if you want a nicer effect like smooth scrolling, but you should only implement once per page.
$(".origin").click(function () {
$('html,body').animate({
scrollTop: $(".destination").offset().top
}, 'slow');
})
Just give the link the class of origin, and the div you want to scroll to the class of destination. Then these can be repeated in different parts of the website (not on same page).
Give name attribute for anchor tag just above your div and mention that name in the link href
<a class="my_link" href="#home"> This is my link </a>
<a name="home"></a>
<div class="Home"> This is my target </div>
<a class="my_link" href="#home"> This is my link </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolor faucibus rutrum. Proin porta condimentum nisl id ullamcorper. Integer in ligula in libero consectetur pharetra. Nam turpis nibh, venenatis ac accumsan ac, posuere eu arcu.
Nunc sagittis turpis quis laoreet volutpat. Donec facilisis, dui sit amet commodo porta, lorem ipsum consequat nulla, sit amet porta sem risus non sapien. Integer efficitur malesuada neque vel malesuada. Fusce non ante euismod, elementum urna tristique, molestie dolor. Nullam ipsum leo, pellentesque sit amet diam sed, lacinia bibendum magna. Maecenas ac congue dui, sit amet sagittis est. Nam eget est at tellus cursus tempus.
</p>
<a name="home"></a>
<div class="Home"> This is my target </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolo Nam sit amet ex pharetra, fermentum dolor quis, posuere tortor. Sed gravida ac justo vel efficitur. Nullam ut diam nec sem imperdiet rhoncus. Ut et nisl non nisl tempor cursus. Sed tincidunt, eros quis tristique congue, augue dolor faucibus dui, a porta arcu lectus quis diam. Aenean sagittis dui quis eros fringilla, non laoreet nibh elementum. Cras porta eget mi at placerat. Maecenas non condimentum massa, eget faucibus arcu. Curabitur vel velit non velit placerat lacinia sit amet sit amet purus. Mauris id condimentum risus, ut fermentum turpis.
</p>
I have attached some content so you can view the demo
Ok. I am trying to achieve a "Medium.com style" image alignment, making it larger than it's container and full width. I did what I knew I had to do with the CSS:
img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}
It almost do what I want it to do, except that, when I use all the 12 grids of Bootstrap, for some reason, it adds a border on the left, as you can see in this fiddle: https://jsfiddle.net/35f4ntqq/
If I change the col-sm-11 to col-sm-10 (making it 11 cols in total), though, it works perfectly fine.
What am I missing here? Or doing wrong...? :/
I think you can changies margin property for img tag:
Like this:
img {
position: relative;
left: 52%;
height: auto !important;
margin: 0px 0 0 -55vw;
width: 100vw;
max-width: 100vw !important;
height: auto !important;
}
See Updated Bootply
You can use container-fluid to achieve the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
img {
height: auto;
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1">
Boo
</div>
<div class="col-sm-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
https://jsfiddle.net/glebkema/pn8jbk8p/
try this.
"medium.com style"
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">
Boo
</div>
<div class="col-xs-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
<div class="col-sm-12">
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
<div class="col-sm-12">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.