I have a text that will dynamically change length and when the length increase, it pushes the div to the right for it further to the right. What I want is to make sure the text length is not affecting the div on the right, not pushing it. The text start out with one char and will not be longer than two char.
In the picture below I tried to illustrate the problem first, and how I want it to look second.
#hjertePic {
position: relative;
margin-top: 29%;
margin-right: 26%;
float: right;
margin-left: 25%;
}
#heartCount {
position: relative;
float: left;
margin-top: 5%;
margin-left: 20%;
margin-right: 5%;
font-size: 100px;
color: white;
text-align: center;
}
heartCount is the text and hjertePic is the div I don´t want to move. Appreciate all the help I can get. :)
You might want to use display: inline-block and a fixed width for the div containing number:
.row .number, .row .text {
display: inline-block;
}
.row .number {
width: 20px;
}
<div class="row">
<div class="number">1</div>
<div class="text">DIV</div>
</div>
<div class="row">
<div class="number">2</div>
<div class="text">DIV</div>
</div>
<div class="row">
<div class="number">13</div>
<div class="text">DIV</div>
</div>
Related
I have in div two divs with floats (left and right). In right div there are paragraphs. All that two divs have inline-block display. If paragraphs in right div too long, then right div jump over the left, and set to display block.
I'm want to paraghraps do new line if it too long.
Code:
.left {
margin: 30px;
float: left;
display: inline-block;
}
.right {
float: left;
margin-top: 30px;
}
.right p {
margin: 10px;
font-weight: 900;
}
<div class="box_container">
<div class="left">
<img src="{url}">
</div>
<div class="right">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
</div>
When text in paragraph too long:
.left {
margin: 30px;
float: left;
display: inline-block;
}
.right {
float: left;
margin-top: 30px;
}
.right p {
margin: 10px;
font-weight: 900;
}
.left img {
border: 5px solid white;
}
<div class="box_container">
<div class="left">
<img src="http://monitorgame.com/m/games/001.jpg">
</div>
<div class="right">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5 text text text text text text lalalalalalalalalalalallalalallalalalala</p>
</div>
</div>
You should allocate space for them. I like using floats in these instances, so for example you could add float:left width: 50% to each one, something like that.
.left {
margin: 30px;
float: left;
width: 50%;
}
.right {
float: left;
width: 50%
margin-top: 30px;
}
You already had the float, you just needed to specify the width. They could be static too not % if you want, but if the static sizes don't fit in the screen they will break like your example.
see working here : https://jsfiddle.net/3LtLuxbc/3/
Just a note on the fiddle - I changed your img size to with 100% and removed the border so it would scale , you can change that to suit your design.
Add a width to the right div. This will force the text to wrap. Without a specified width, div will increase in size until reaching max size of wrapper div or page
I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.
http://jsfiddle.net/o6gqvtoo/
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text{
display: block;
vertical-align: middle;
}
.pull-left {
display: block;
}
vertical-align is sort of an odd one.
Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.
But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:
http://jsfiddle.net/06c7eosv/
Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html
Good:
<div>...</div><div>...</div>
Bad:
<div>...</div>
<div>...</div>
Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div
.banner {
margin-top: -2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pull-left {
display: block;
}
<div class="banner">
<div class="span10">
<!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
</div>
</div>
</div>
That said, other options may be available if the two internal divs can be combined.
Usually, vertical-align sets the alignment of inline level elements relatively to the line box.
However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.
Therefore, you can use CSS tables:
.banner {
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text {
display: table-cell;
vertical-align: middle;
}
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text{
display: table-cell;
vertical-align: middle;
}
.pull-left {
display: block;
/* float:left; */
}
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??
I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.