I want Text Left and Text right should come in same line and I can't restructure HTML.And if I use Absolute position I am not sure how it will behave in different devices and screen size due to yellow area(). Can I give absolute position with reference to parent div(ms-srch-result)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top" style="display:block;width: 700px;">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 1: (remove inline styles)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 2: (flex-box)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
width: 200px;
}
.ms-srch-result div{
margin: 10px;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 3: (flex property)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
}
.ms-srch-result div{
flex: 1;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Use something like this in your CSS stylesheet:
#UpScopeLinkTop, #ResultCount {
width: 45%;
}
(Adjust the value as you need it)
P.S.: erase the 700px width from the HTML tag of #UpScopeLinkTop
You don't need floats. Instead of divs inside the big div, use spans.
<div id="thebigdiv">
<span style="display:inline-block";>
Text left
</span>
<span style="display:inline-block";>
Text right
</span>
</div>
Related
I want to achieve something like this
and I thought about using a flexbox to put these items in one row.
#container {
display: flex;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
The first and the second div container should have the default alignment on the left side. The third container should be aligned at the right side of the parent container.
I don't want to use flex: 1 because on large screen sizes the spacing between div 1 and 2 would be too big. They should be placed close to each other.
When the screen size gets smaller, the space between the second and the third container should get smaller until the third container is next to the second container. To prevent the overlap I simply want to remove the flexbox with
#media(max-width: 500px){ /* just a sample width */
#container{
display: block
}
}
How can I achieve that?
This could be a solution to your problem. I added <div id="separator"> to separate (box 1 & 2) from (box 3). After that I used justify-content: space-between; on the main containerSee demo below:
#container {
display: flex;
justify-content: space-between;
}
#separator{
display: flex;
}
.box{
border: 1px solid black;
}
#media screen and (max-width: 500px) { /* just a sample width */
#container, #separator{
display: block;
}
}
<div id="container">
<div id="separator">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
No need to add extra HTML just add margin-left:auto to the last box
#container {
display: flex;
}
.box {
border: 1px solid green;
margin: 0 .25em
}
.box:last-child {
margin-left: auto;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I have this code
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
I am not able to vertically align the text2 to the bottom of the parent div.
How to do it?
That's rather strange HTML code, but here's a solution that doesn't change the HTML:
(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned
try this
`<div style="float:left">
<h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
<h2> text2</h2>
</div>
<div class="clear:both"></div>`
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.
I want images to be always on right of the thread, instead of being on top of reply button.
When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure
How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704253855.jpg <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a>[Reply]</p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704190918.jpg <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a>[Reply]</p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
when I add CSS
.post-image
{
float: right;
}
it breaks everything.
jsfiddle before
js fiddle after floating post-image to the right
This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property).
In your code you could probably
Add this:
.clear{
clear:both;
}
to better understand. Also don't forget to play with it to put it ideally where it is required.
If you can use flexbox (no way to old browsers) try something like:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
on a html strukture like
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
Add one more div with "clear: both" styling will fix your problem.
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
jsfiddle