What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
Related
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>
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
In the following code, I need the div elements #ldiv and #rdiv to be placed next to each other.
So I am using the CSS float property. I looked up this answer, and I think I am following it, but still the div's won't position next to each other. The second div displays in the next line.
Then I thought that div is a block level element, so I replaced the div by span elements. But that did not help either.
JSFiddle here.
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b;">
<span>Yes</span>
<span>No</span></div>
<div id="option_one_div">
<div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;">
<label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
<label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
</div>
<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
</div>
</div>
In your situation you can use display:table in container(#option_one_div) in your example and display:table-cell in children elements(#ldiv, #rdiv) like this:
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b;">
<span>Yes</span>
<span>No</span></div>
<div id="option_one_div" style="display: table;">
<div id="ldiv" style="background-color:#74d4dd; width:150px;display:table-cell;">
<label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
<label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
</div>
<div id="rdiv" style="display:table-cell; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
</div>
</div>
fiddle
As you can see you don't need floats.
use width with float in div
<div id="rdiv" style="float:right; background-color: #74d4dd; /* margin-left: 151px; */ padding-left: 20px; width: 210px;padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
plz check
the total width of the elements (incl. margin/border) can not be greater than the surrounding divs width of 400px else the floating elements will be put into the next line ... see akz's answer for a quick fix
Just remove float:right. It will work.
<div id="rdiv" style="background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
DEMO
the main problem is you didn't add width to the id="rdiv" and used margin-left:151px
when you use some element with float, you have to add its width
<div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">a</div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">b</div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">c</div>
</div>
to solve the problem, you can do one of the following things:
1: change your code to:(notice you set margin-left:151px; in th id="rdiv" and I changed it to lower value)
<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:15px; padding-left: 20px; padding-right: 20px; width:50px;">
2: remove your float=right in the id="rdiv" so the id="ldiv" could be in the float version of this element
Let's say I have this code
<div id="content1" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>
<div id="content2" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>
And I want the input to be vertically centered into the center of the div. How can I do that?
Just try this. And look at the demo
#content1 {
text-align: center;
}
The original html is incorrect and the div's height and width should be supplied in css (or using the style attribute).
To align in the center vertically and horizontally:
#content1 {
width: 400px;
height: 100px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
As there are two of these divs immediately next to each other then table-cell will cause them to sit adjacent to each-other, on the same line. I would either wrap each in another div (not a great solution) or place a br tag between them (or some other content).
If the intention is to have several of the divs immediately next to, and below, each-other then I would consider using a table.
Use display:inline-block on the child elements and use text-align:center on the parent. That should do the trick
<div id="content1" style="text-align:center" width="400px" height="100px">
<input type="text" style="display:inline-block" id="znamkyInput">
</div>
Just try the following,
<div id="content1" width="400px" height="100px">
<input type="text" style="display:inherit" id="znamkyInput">
</div>
Try this:
HTML:
<div id="content1">
<div>
<input type="text" id="znamkyInput"/>
</div>
</div>
CSS :
#content1
{
background-color: gray;
width:400px;
heigth:100px;
}
#content1 div
{
margin-left: auto;
margin-right: auto;
width: 158px; /*width of your input box*/
}
Working Example
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>