I have two divs on a page. Div #1 is floated left and contains an image and some text. The text in div #2 wraps around it nicely, as I expect. But when there's a blockquote with some styling in div #2, the styling extends into div #1. This isn't what I want.
I'm sure I'm missing something super basic, but I can't figure out what it is.
In this sample, I don't want the red going into the gray.
.floatl {
float: left;
height: 200px;
width: 100px;
background: #CCCCCC;
opacity: 0.5;
margin-right: 2px;
}
blockquote {
border-bottom: 3px solid red;
border-top: 3px solid red;
}
<div class="floatl"></div>
<div>
<p>This is some text here.</p>
<blockquote>This is a quote.</blockquote>
</div>
I'm looking to either a) get div #2's non-text content to respect div #1 or b) discover another way to float div 1 to the left.
Thanks for your help!
Wrap the divs in a new div and apply display:flex so it will become the flexbox container.
.new-wrapper {
display: flex;
}
Your main content, which is now a flex item along with the .float1 div, will want to shrink up. I gave the content div a class and told it to grow to fill the rest of the flex container:
.main-content {
flex-grow: 1;
}
Remove the float and now you are good.
.new-wrapper {
display: flex;
}
.floatl {
height: 200px;
width: 100px;
background: #CCCCCC;
opacity: 0.5;
margin-right: 2px;
}
.main-content {
flex-grow: 1;
}
blockquote {
border-bottom: 3px solid red;
border-top: 3px solid red;
}
<div class="new-wrapper">
<div class="floatl"></div>
<div class="main-content">
<p>This is some text here.</p>
<blockquote>This is a quote.</blockquote>
</div>
</div>
Related
I would like to vertically align a child element in a flex box (or text box) so that its bottom coincides with the baseline of its siblings.
This happens by default for images:
MDN <img> Element:
<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.
Can I achieve the same effect with a <div> instead of an <img>?
Later edit: I'm attaching a snippet. I want the bottom border of the last child to coincide with the bottom border of the image (the baseline of the rest of the children). I don't want everything aligned to the bottom.
.parent {
display: flex;
align-items: baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
Later edit 2. A picture is a thousand words. Hope it helps clarify what kind of alignment I need. Notice how letters j, p, and q extend below the baseline.
Finally, I found a solution:) It was hidden somewhere in the CSS specification:
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
This is taken from https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align, bottom of the page.
So, in order to move its baseline to the bottom margin edge, you only have to add display: inline-block and overflow: hidden (or anything other than 'visible', eg: 'auto') to the child element:
body {
font-size: 200%;
}
.bottom {
display: inline-block; /* <--- this */
overflow: hidden; /* <--- and this */
width: 10rem;
border: 2px solid orange;
padding: 2rem;
}
<div>
<span>text jklmnopqr</span>
<div class="bottom">div with bottom on the baseline</div>
</div>
So I have not found a good solution for your question, but I give you what I've tried, maybe it will give you some ideas.
Apparently, the baseline alignement with flexbox only align the text content as you want, not the div itself.
.parent {
display: flex;
align-items: last baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
But an empty div will be aligned on baseline ?
.parent {
display: flex;
align-items: baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
width:50px;
height:50px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom"></div>
</div>
I have tried solutions with absolute positionning, but you are forced to define the size of the parent, which is not a good solution...
The best solution I found is, I think, to align the text with flexbox, then translate the block with the size of your padding... I hope it helps you a little bit...
.parent {
display: flex;
align-items: last baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
transform:translateY(-10px);
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
Another solution would be to align everything with flex-end so that every child are aligned at bottom but I guess it is not what you want as you said already.
I created a simplest example.
.parent{
display: inline-flex;
flex-direction: row;
align-items: flex-end
}
.child{
background: red;
color: white;
width: 50px;
height: fit-content
}
<div class='parent'>
<div class='child'>some text</div>
<div class='child'>some more text</div>
<div class='child'>some more more more more more more more more text</div>
</div>
i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
Since the edge of an element with margin-left: -10px crosses the edge of its parent, why doesn’t the same happen with margin-right: -10px?
example
div {
background: red;
width: 200px;
height: 100px;
}
p {
background: blue;
width: 100%;
}
.left {
margin-left: -10px;
}
.right {
margin-right: -10px;
}
<div>
<p class="left">Hello</p>
</div>
<div>
<p class="right">Hello</p>
</div>
The good news is that negative margins do work!
To see negative margins at work, consider the following code snippet:
.wrapper {
outline: 1px solid blue;
padding: 40px;
}
.content {
outline: 1px solid red;
background-color: #D8D8D8;
}
.content p {
outline: 1px dotted blue;
background-color: rgba(255, 255, 0, 0.3);
margin: 0 0 0 0;
text-align: justify;
}
.content p.lefty {
margin-left: -20px;
}
.content p.righty {
margin-right: -20px;
}
<div class="wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, ...</p>
<p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p>
<p class="righty">Curabitur aliquam tristique mattis...</p>
</div>
</div>
I added outline's to all the div's and p's to show the extend of the content boxes.
The first paragraph has zero margins and I offset one paragraph to the left and the other to the right.
If you have enough content to fill the width of the paragraph (or if you show the outlines), you will see the text box flow outside of the content box. You can also see from the paragraph outline's that the text does extend to the left and to the right.
However, to see the effect on the right, you need enough content to fill in the full width of the paragraph or you need to set a background color or outline on the child element.
If you start fixing the width and height, on content, you will see other effects such as the paragraphs flowing outside of content.
Studying this simple code structure illustrates many facets of the CSS box model and it is illuminating to spend some time with it.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/2SKjM/
If you remove the padding from the wrapper, you may not notice the right margin shift because the elements will extend to fill the full width of the parent container or the page width depending on the specific details of the HTML/CSS.
Why Did My Example Not Show the Effect!!!???
In your example, you did not see the effect because you fixed the width of the p elements by specifying width: 100%, which directs the paragraph to take the width of the
parent container (200px in your example).
If you make a simple change to the width from 100% to auto:
p {
background: blue;
width: auto;
}
you will see your second paragraph just out to the right as you expected.
Note: Outline vs Border
Also, note that the red box is due to the outline, which encloses the text boxes within the content, even when the text boxes extend outside of the parent (content) element. As a result, the outline box can be much bigger than the border box of the corresponding element.
It's because elements are laid out from left-to-right by default not right-to-left. You can see the opposite effect when you float the <p>s right.
jsFiddle
.right {
margin-right: -10px;
float:right;
}
Simply, just change this css :
p {
background: blue;
width: 100%;
}
to:
p {
background: blue;
display: block;
}
Here the demo : http://jsfiddle.net/pVKNz/
If you want to made like shifting elements, use this css:
.left {
margin-left: -10px;
margin-right:10px;
}
.right {
margin-right: -10px;
margin-left:10px;
}
If there is someone wants to give negative margin-right to flex box,
Please consider justify-content: space-between.
HTML
<div class="parent">
<div class="child">
</div>
<div class="child negative-margin">
</div>
</div>
CSS
.parent {
box-sizing: border-box;
/* please concentrate on flex, space-between */
display: flex;
justify-content: space-between;
background-color: blue;
width: 500px;
height: 200px;
border: 5px solid red;
}
.child {
box-sizing: border-box;
display: inline-block;
width: 50%;
background-color: yellow;
}
.negative-margin {
background-color: cyan;
margin-right: -250px;
}
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle
I'm not sure how to make this work crossbrowser-wise, so I need some of your expertise ;)
How do I make styling that looks like this and works crossbrowser-wise? (IE7 as well)
http://imageshack.us/photo/my-images/543/examplek.jpg/
The red box has a fast defined width
The green box is centered inside the red box and has a dynamic width + a padding/border
The blue box is a "mouseover" div which needs to have the same width as the green box (without the padding/border)
Here is one way to achieve this (with a dynamic width for green box): http://jsfiddle.net/nKdt6/
HTML
<div class="outer">
<div class="inner">
<p>
lorem ipsum
<p>
<div>
<p>Blah blah blah</p>
</div>
</div>
</div>
CSS
.outer {
background-color : red;
text-align: center;
width: 500px;
}
.inner {
background-color: lime;
border: 3px black solid;
display: inline-block;
padding: 20px;
*display: inline;
*zoom: 1;
position: relative;
margin: 100px 0;
border-radius: 10px;
overflow: hidden;
}
.inner > div {
display: none;
background-color: aqua;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.inner:hover > div {
display: block;
}
To center the .inner element when it has a dynamic width we can use text-align: center in .outer and display: inline-block in .inner. I have added the extra CSS *display: inline and *zoom: 1 to make this work in IE7 as it does not support display: inline-block.
Edit
To get a thin black outline (outer border) around a wide white inner boder (as achieved and demonstrated by #DonPedro in the comments below), you can add a second border to an inner child element that controls the full height and width of the parent element. In the example above, this is .inner > p.
CSS
.inner {
...
border: 1px black solid;
...
}
.inner > p {
...
border: 10px solid white;
...
}
Working JSFiddle: http://jsfiddle.net/nKdt6/1/ (provided by #DonPedro)
This cannot be achieved using outline due to the border-radius styling, and as far as I am aware Mozilla is the only browser that supports any type of outline radius (-moz-outline-radius).