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
Related
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
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>
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 a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.
Is there any way to make padding increase the contents' distance from the element's edge, as opposed to making the element bigger?
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
float: left;
width: 30%;
background-color: lightgreen;
}
.padded {
padding: 25px; /* Forces box onto next line */
}
<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
<br><br>
<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>
When you use the border-box model, the padding is included in the box size. See here for details.
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
box-sizing: border-box;
padding: 25px;
float: left;
width: 30%;
background-color: lightgreen;
}
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.
For example:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>