I have the following html:
<!DOCTYPE html>
<html>
<body>
<h1 style="margin-bottom: 0;">Hello Plunker!</h1>
<div style="background-color: red; height: 100px; width: 250px;"></div>
</body>
</html>
Basically I would like to give my h1 a width that the text inside it should occupy no matter if I add or remove a word (adapting the font-size and the letter-spacing according to it). I could change my "Hello Plunker" and the last letter should still finish where the div below finishes.
I can use some js if needed but not Jquery
This is an ugly answer, but it might just do the trick if you plan on sticking to CSS. Hopefully someone will be able to point out a better way, however.
This idea relies on the fact that text-align: justify will spread out all lines of text but the last one (or the only one in case of just one line). Therefore, we're adding some useless text just to make sure there are at least two lines of text. Then, we try to hide the second line. I'm sure this could be improved upon:
h1 {
width: 250px;
height: 1.4em;
margin-bottom: 0;
background-color: green;
text-align: justify;
}
h1 span {
visibility: hidden;
display:inline-block;
line-height: 0px;
}
div {
background-color: red;
height: 100px;
width: 250px;
}
<h1>Hello Plunker<span>make sure there are two lines, pretty please?</span></h1>
<div></div>
You can edit the jsfiddle here. To be honest, I guess it would be better to use JavaScript.
If you're willing to use JS, then http://fittextjs.com/ is worth a look. I don't think is achievable using CSS alone.
Just an Idea of using transform:scale(jQueryCalc) - to make content fit its parents innerWidth.
$(document).ready(function() {
$(".fit").each(function() {
$(this).css("transform", "scale(" + ($(this).parent().innerWidth() / $(this).width()) + ")");
});
});
.container {
background-color: red;
height: 70px;
width: 250px;
display: inline-block;
position: relative;
overflow: hidden;
}
.fit{
display: block;
color: #FFF;
float: left;
transform-origin: left top;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="fit">Hello Plunker!</h1>
</div>
<div class="container">
<span class="fit">Well this should work</span>
</div>
<div class="container">
<span class="fit">Well this should work; Well this should work</span>
</div>
<div class="container">
<span class="fit">Well this should work; Well this should work; Well this should work; Well this should work</span>
</div>
Related
My div should contain two more divs inside (in-left and in-right), but in-right isn't working. How am I supposed to align it with in-left?
#left {
position: absolute;
top: 76%;
left: 20%;
color: black;
border: 2px solid black;
border-radius: 15px 15px;
padding-left: 15px;
padding-right: 15px;
font-size: 1em;
text-align: center;
background-image: url("pink.jpg");
height: 1000px;
width: 800px;
background-size: 900px 1000px;
border: 1px solid black;
background-repeat: no-repeat;
box-shadow: 7px 7px 18px white;
}
#in-left {
top: 87%;
left: 22%;
color: black;
font-size: 1.5em;
text-align: left;
height: 650px;
width: 400px;
font-family: AR CENA;
border-right: 1px solid white;
}
#in-right {
top: 87%;
left: 50%;
color: black;
font-size: 1.5em;
text-align: right;
height: 650px;
width: 400px;
font-family: AR CENA;
}
<div id="left"><br>
<center>
<img src="acoe.jpg" alt="it's me" height="200" width="250"><img src="jer.jpg" alt="it's me" height="200" width="250"><img src="ako ulit.jpg" alt="it's me" height="200" width="250"></center>
<div id="in-left">
<center>
<h2>
Hobbies
</h2>
</center>
<ul>
<u><b><li>Biking 🚵</li></u></b>
I bike around the subdivision every other day, alone and sometimes with my friends. I really enjoy the solitude and the way the air hits my hair, and I can proudly say that biking is my relaxation technique.
<u><b><li>📖 Reading books and short stories 📖</li></u></b>
I usually spend my time indoors, and reading has been a big help for me to ease my boredom. I enjoy the horror genre because of the feeling of thrill and excitement it gives me. Reddit:
<img src="reddit.png" height="25" width="25">
<u><b><li>📽 Watching movies 🎥</li></u></b>
<u><b><li>🎧 Listening to music 🎶</li></u></b>
<u><b><li>Playing Videogames 🎮</li></u></b>
<u><b><li>🍔 Eating 🍳</li></u></b>
</ul>
</div>
<div id="in-right">
<center>
<h2>
Interests:
</center>
</h2>
</div>
</div>
use the float property of CSS. thanks
float : right;
Using flexbox will help you to achieve a solution easily. Check the snippet.
div {
border: 1px solid #ddd;
padding: 10px;
}
.container {
display: flex;
}
.in-left, .in-right {
flex-grow: 1;
}
<div class="container">
<div class="in-left">
Left
</div>
<div class="in-right">
Right
</div>
</div>
There are a number of options that allow you to achieve what you're looking for here, but before I start listing them, a quick piece of advice when it comes to HTML and CSS: "The more you try to do, the more difficult it will become, try to look for the simplest solution".
With that in mind, let's look for a few simple solutions which let you achieve what you're looking for.
Option 1: Float
float is a brilliant property which allows you to align div elements within their parent container. It can work really well, however you need to be careful because (as the MDN documentation states):
...the element is taken from the normal flow of the web page...
What this means is that your parent container won't be sized to contain your div anymore. To fix this, you can use the clear property on the parent's ::after pseudo-element, which will force it to resize correctly.
.parent {
background: red;
color: white;
}
.parent::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
background: blue;
padding: 10px;
}
.right {
float: right;
background: green;
padding: 10px;
}
<div class="parent">
<div class="left">
My first div
</div>
<div class="right">
My second div
</div>
</div>
Option 2: Inline Blocks
The next option takes advantage of the display property which allows you to configure how the Browser renders the element. Specifically, it allows you to configure the rendering box used by the Browser. By default a <span> element uses the inline display mode, while a div uses the block display mode. These correspond to (roughly) horizontal and vertical layout ordering as you can see in the following example:
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>Third</span>
<span>Fourth</span>
</div>
What display: inline-block allows us to do is instruct the browser to render the blocks as normal, but arrange them horizontally as though they were part of the normal text flow. This works really well and is much better supported by older browsers than Option 3 (but not as well as Option 1).
.parent > div {
display: inline-block;
}
.parent {
background: red;
color: white;
}
.first {
background: blue;
padding: 10px;
}
.second {
background: green;
padding: 10px;
}
<div class="parent">
<div class="first">First</div>
<div class="second">Second</div>
</div>
Option 3: Flexbox
The coolest option, albeit the newest and therefore least supported by older browsers, is using the new flexbox layout mode. It's currently still in draft state, but a lot of modern browsers support it already.
Flexbox lets you do the same kind of thing as Option 2 but with much better control over how things get arranged, the spacing between them, how they flow onto other lines and so on. There's a lot that can be covered and I'm not going to do that all here, but the part that applies to you is this:
.parent {
display: flex;
flex-direction: horizontal;
justify-content: space-between;
background: red;
color: white;
}
.first {
padding: 10px;
background: blue;
}
.second {
padding: 10px;
background: green;
}
<div class="parent">
<div class="first">First</div>
<div class="second">Second</div>
</div>
As this is a school project, my suggestion is that you spend some time reading up on (and experimenting with) the various options here and getting a feel for what they do. Which one you end up using is a lot less important than learning how to use them in the first place. Best of luck with it.
I have updated your code so it will look more cleaner. I have also created a class inlineblock to the CSS and added to both div elements inside the #left parent element. In your HTML code there are syntax errors like in closing tags.
Here is the link I have created for you https://jsfiddle.net/beljems/fyyqvm1t/13/.
Hope this will help you :)
Just try to use "float: left"
Here u have tutorial for using this
CLICK
If u want to delete the "float" on rest space of site u need to use "clear: both"
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
</body>
</html>
I wrote doc.html and css2.css according to this guide learnlayout. but the page looks like this.
how to make those two parts in one line?
Your CSS is correct; this issue is a well known whitespace problem. You need to make sure that there is no whitespace between the tags:
<body>
<div class="container elem"
><div class="nav"></div
><div class="elem column"></div
></div>
</body>
This is because your content is inline, which makes the whitespace between .nav and .elem flow. It's small (around 4px), but enough to separate your <div>s and break your layout.
By placing the closing bracket right next to the starting bracket in the next element, all the whitespace in between is instead inside the tag, not part of the content (and since tags can contain whitespace between attributes and tag names, this is OK).
This is the typical whitespace problem with inline-block. You can always solve it by assigning font-size: 0; to the parent element.
.container.elem {
font-size: 0;
}
/* remember to reset font-size to what you need in child elements */
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
Another solution would be to make both divs float left, but that has it's own problems and complexity which is why I'd advise sticking with inline-blocks.
The issue is with whitespace. To fix it, apply this CSS to the container:
.container{
font-size:0;
}
It's simply make them into one line, except if the parent width is setted and their combined width is bigger than their parents.
.container.elem div{
float:left;
}
There are two div tag. First one is display 20px from right side and another is displaying 103px from right and both are in the same row.
some times both were getting overridden because of the text inside the div tags. the text will vary based on some option. its dynamic. sometimes it wont get overridden because the text size is low.
i want the following scenarios to be done.
first div tag's right would be 20 px. second div tag right's needs to be starts from the left edge of the first div tag. is this possible? can anyone help me?
.second-button {
font-size: 14px;
color: #00aeef ;
position: absolute;
bottom: 22px;
right: 103px;
cursor: pointer;
}
.first-button {
position: absolute;
right: 20px;
bottom: 16px;
}
The above style i am currently following. Based on that can any one give the solution?
.main-div {
text-align: right;
}
.div1 {
display: inline-block;
background: #CCC;
}
.div1:last-child {
margin-left: 20px;
}
<div class="main-div">
<div class="div1">This is first div</div>
<div class="div1">This is second div</div>
</div>
to both of your div's add the word-wrap: break-word; css give them the desired width and you should be great
I made some code.. might be it will help you
<div class="abc">First Div</div>
<div class="abc">Second Div</div>
<style> .abc{float:right; margin-right:20px;}
</style>
try this
<style type="text/css">
#div1{
margin-left: 20px;
}
#div1, #div2{
display: inline-block;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
I would like to ask if this kind of column stacking is possible on Bootstrap without using Javascript or JQuery.
This One
instead of This.
I used
col-md-6
to style my columns at the moment, however I cannot figure out how to prioritize the stacking to fill vertical space first until it reaches the end (height) of the parent <div> followed by filling the neighboring horizontal space going down, and so on.
I could not find any topics about this anywhere in Google. So, I came here to see if it is actually possible or it isn't.
Thanks.
Yes, it's possible. But you need two wrappers. One for 1 ~ 4 second for 5 and 6.
jQuery is only used to demonstrate view-port change
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('v2')
});
});
div div div {
border: 1px solid #ddd;
text-align: center;
font-weight: bold;
float: left;
padding: 20px 20px;
}
div {
box-sizing: border-box;
}
.wrapper {
width: 100px;
height: 250px;
}
.w-1,
.w-2 {
width: 50%;
float: left;
}
.v2 .w-1,
.v2 .w-2 {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="w-1">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
<div class="w-2">
<div class="col-xs-6">5</div>
<div class="col-xs-6">6</div>
</div>
</div>
<hr/>Only for demo:
<button>Toggle layout</button>
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/