I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
Related
I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.
I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).
I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}
<p>How it looks like with my flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
Use white-space:nowrap on the second element so it does not collapse.
.flex {
display: flex;
border: 1px solid green;
}
.first {
background: lightblue;
border: 1px solid grey;
}
.second {
white-space: nowrap;
background: lightgreen
}
.narrow {
width: 50%;
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr/>
<div class="flex narrow">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I'm having trouble with WordPress, nesting box within a box.
Outside of WordPress this works fine. I'm sure there's just one or two parameters wrong.
The outer box is dp23, the inner box is dp22
For some reason there is spacing between the inner boxes (dp22) .
you can see the problem here: http://4tepiano.com/recommended-piano-books-2/
CSS code:
.dp101
{
float:left;
width:100%;
border:1px solid green;
display: inline;
clear: both;
margin:auto;
}
.dp75 {
width:84%;
border-color:gray;
border-style:solid;
border-width:1px;
overflow:auto;
float: right;
text- align:left;
padding:10px;
}
.dp22 {
border:1px solid red;
HEIGHT: 1.2em;
margin:1px;
padding:1px;
font-size: .8em;
overflow:auto;
display: block;
}
.dp23 {
width:12%;
border:1px solid green;
float:left;
margin:1px;
padding:1px;
}
[edited]
.dp23 p {
display: none;
}
Html Code:
<div class="dp101" style="BACKGROUND-COLOR: #fdfcdc">
<div class="dp23" style="HEIGHT: 150px";><!--Left Column-->
<!--category--> <div class="dp22"> category </div>
<!--Title--> <div class="dp22" > Title </div>
<!--Author--> <div class="dp22" > Author </div>
<!--Price--> <div class="dp22"> Price </div>
<!--Link--> <div class="dp22"> Amazon Link </div>
<!--Cover--> <div class="dp22" style= "HEIGHT: 85px"; > Cover </div>
</div> <!--End-Left Column-->
<!--Right Column-->
<div class="dp75"style="HEIGHT: 150px"; >
Work in progress.
</div> <!--End-Right Column-->
<div class="dp75" style="HEIGHT: 10px";> <!--Right spacer--> </div>
I have used borders to make it easy to see. The boxes should be stacked together, with the borders touching each other.
You have random <p> tags in your code between your dp22 <div>s. They look somewhat like this:
<p>
<!--Author-->
</p>
Remove them or include the following code in your CSS:
p {
display: none;
}
Though that may cause other problems if you are actually using <p> tags elsewhere.
You have empty <p> tags between those elements - they actually have comments in them..
Remove the <p> elements between dp22, and your problem is solved.
Because your coding above doesn't demonstrate this, I am going to assume that wordpress is generating these <p> tags.. I suggest removing all the unnecessary spacing in your HTML.
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I am trying to align the elements in the head portion of a webpage properly.
There are three elements placed inside a header div:
The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.
All three elements should be justified to the bottom of the header div.
I have been wrestling with this but nothing seems to work. Can you please help? Thanks!
<div style="float: right;">
<ul>
<li>Menu item</li>
</ul>
</div>
<div style="float: left;">
<img style="border: 0;" src="something.png" />
</div>
<div style="width: 300px; margin: 0 auto;">
Search box
</div>
Just a quick mockup.
UPDATE: using table/table-cell trick to allow vertical-align: bottom;
You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.
The markup:
<div class="table header">
<div class="table-cell">
<div class="logo"> </div>
</div>
<div class="table-cell">
<div class="searchbox"> </div>
</div>
<div class="table-cell">
<div class="menu"> <br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
and css:
.table {
display: table; /* our outer contaner should behave like table; */
width: 100%; /* set width to 100% */
}
.table-cell {
display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
vertical-align: bottom; /* align all elements vertical */
background: yellow; /* for debug purposes */
}
.logo {
float: left;
width: 100px;
background: green;
}
.menu {
float: right;
width: 100px;
background: red;
}
.searchbox {
margin: 0 auto;
width: 100px;
background: blue;
}
Complete example: http://jsfiddle.net/EREmH/4/