Set auto height to label based on above div. I tried below code please check with fiddle. I set height:auto to label. Its not supported to this label. I need to that right side image to equal of left side checkbox height.
jsfiddle.net/malaiii/3vej0tca/
If you want to set height of column is equal to height of other column you can use position absolute for column that is less than other.
HTML like
<div class="wrapper">
<div class="left">
<div class="control">
<input type="checkbox" /> Click me
</div>
<div class="control">
<input type="checkbox" /> Click me
</div>
<div class="control">
<input type="checkbox" /> Click me
</div>
</div>
<div class="right">
<img src="http://placehold.it/350x150">
</div>
</div>
And CSS
.wrapper {
position: relative;
width: 404px;
overflow: hidden;
border: 1px solid #f00;
}
.wrapper .left {
width: 200px;
float: left;
border: 1px dotted #00f;
}
.wrapper .right {
position: absolute;
left: 200px;
top: 0;
bottom: 0;
width: 200px;
float: left;
background: #efefef;
}
.wrapper .right img {
height: 100%;
}
.control {
padding: 10px;
}
See fiddle with example http://jsfiddle.net/588efqtf/2/
Hope it'll help you.
Related
I'm trying to align divs in a row with display: inline-block. It works fine till I put a <input /> inside the div. Please take a look at the codepen
Here is the code for html:
<div class="x"></div>
<div class="x">
<input type="text">
</div>
<div class="x"></div>
And for css:
.x{
display: inline-block;
height: 250px;
width: 250px;
background: #eee;
margin-right: 10px;
}
I already know the solution for aligning them the proper way. I want to understand why this is happening in the above case.
by default vertical-align is baseline.
change it like this:
.x {
vertical-align: top;
//other css...
}
.x {
display: inline-block;
height: 250px;
width: 250px;
background: #eee;
margin-right: 10px;
vertical-align: top;
}
<div class="x"></div>
<div class="x">
<input type="text" />
</div>
<div class="x"></div>
.x{
display: inline-block;
height: 250px;
width: 20%;
background: #eee;
margin-right: 10px;
vertical-align:middle
}
<div class="x"></div>
<div class="x">
<input type="text">
</div>
<div class="x"></div>
vertcal-align:middle;
Add it to align your divs vertically
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
I have a certaing layout of nested divs. One of them I would like to expand beyond its parent. However, with this nesting it's not that simple - I think.
Html:
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't change the html, and there may be other .gcrows that need to stay inside the container. Is this possible to to at all?
Fiddle here.
I hope my question makes sense.
For your current HTML structure you can use .gcrow:first-child and set min-width: 100vw which is same as wrapper width if you remove default margin and padding from html, body.
You can use position: relative, left: 50% and to make it center just add transform: translateX(-50%), here is Fiddle
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
padding-left: 20px!important;
padding-right: 20px!important;
border: 1px solid pink;
}
.gridcontent {
width: 100%;
max-width: 1018px;
border: 1px solid #333;
margin: 0 auto;
}
.gcrow {
max-width: 100%;
width: 100%;
border: 1px solid #f00;
}
.gcrow:first-child {
min-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Leave me alone</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also its box-sizing: border-box not box-border
try something like this
.gcrow {
position: relative;
overflow: visible;
}
.gcitem {
position: absolute;
right: 0;
top: 0;
}
http://jsfiddle.net/0hr4m9y6/
I have a select dropdown + a text input field that both belong in one div so that I can have a border around the 2 things.. On the absolute right of this div should be a button that says "Search" (without a border)
I'm having issues putting all 3 (select, text input, search) all on the same line with the input stretching out from next to the select dropdown all the way to the right next to the Search button.
HTML
<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>
</div>
<div class="right">
<input type="text" id="text">
</div>
</div>
<input type="submit" value="Search">
</div>
CSS:
.lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
#text {
width: 100%;
}
.blah {
width: 100%;
}
If you look at the fiddle, you'll notice I almost have it, but the input doesn't stretch to the width of the screen/window. I want it to stretch all the way, with Search being the rightmost thing on the line.
http://jsfiddle.net/0hr4m9y6/1/
HTML:
<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>
</div>
<div class="right">
<input type="text" id="text">
</div>
</div>
<input type="submit" value="Search">
CSS:
</div>
.lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
#text {
width: 100%;
}
.blah {
width: 100%;
display: flex;
}
.lineContainer {
flex: 1;
}
The above solution uses flexbox. It's easier to use, but compatible with only IE10+. If you want IE compatibility, try this:
http://jsfiddle.net/0hr4m9y6/5/
HTML:
<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>
</div>
<div class="right">
<input type="text" id="text">
</div>
</div>
<input type="submit" value="Search">
</div>
CSS:
.lineContainer {
display: inline-block;
border: 1px solid #000
}
.lineContainer div {
height: 30px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
#text {
width: 100%;
}
.blah {
width: 100%;
}
.lineContainer {
width:90%;
}
input[type="submit"] {
width:9%;
vertical-align:top;
}
NOTE: You can set width:10%; to the submit button, just give it a box-sizing:border-box;
Here's an adjusted version that uses absolute positioning to make the input fill the full horizontal width between the dropdown and the submit button: http://jsfiddle.net/troygizzi/0hr4m9y6/2/
.blah {
width: 100%;
position: relative;
}
.lineContainer {
position: absolute;
left: 0;
right: 75px;
height: 30px;
border: 1px solid #000;
}
.left {
position: absolute;
padding: 3px;
height: 24px; /* plus 6 for the top & bottom padding */
width: 100px;
border-right: 1px solid #000;
}
.right {
position: absolute;
padding: 3px;
left: 108px;
right: 5px;
}
input[type='submit'] {
position: absolute;
right: 3px;
width: 70px;
top: 3px;
}
#text {
width: 100%;
}
<div class="blah">
<div class="lineContainer">
<div class="left">
<select>
<option value="zzz">zzz</option>
</select>
</div>
<div class="right">
<input type="text" id="text" />
</div>
</div>
<input type="submit" value="Search" />
</div>
Using Bootstrap you can do this, pretty simple.
input or select will fill the available space, tried the other ways and was struggle so posting this here incase it can help anyone else.
<div id="yourDiv">
<div class="row no-gutters">
<div class="col-auto">
<label>Starting Sp:</label>
</div>
<div class="col">
<input id="startingSp"/>
</div>
<div class="col-auto">
<button>Go</button>
</div>
</div>
</div>
and css:
input, select {
width: 100%;
}
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Do you mean something like this? http://jsfiddle.net/0hr4m9y6/4/
HTML:
<div class="blah">
<div class="lineContainer">
<select class="left">
<option value="zzz">zzz</option>
</select>
<input type="text" id="search">
<input type="submit" class="right" value="Search">
</div>
</div>
CSS:
.lineContainer {
display: inline-block;
border: 1px solid #000;
position: relative;
width: 300px;
}
.lineContainer div {
height: 30px
}
.left {
font-size: 100%;
width: 20%;
float: left;
}
.right {
border: none;
padding: 2px 0;
width: 20%;
float: left;
}
#search {
border: none;
width: 60%;
padding: 2px 0;
float: left;
}
.blah {
width: 100%;
}
I think in #text you should let the width by a specific number, for example: 500px. Because in your CSS code, you did'nt set the width for whole page, so if #text has width:100%;, its almost change nothing!
I am not able to vertically align middle some text using the position absolute method.
JSFIDDLE
HTML
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
CSS
.heighted {
background: gray;
height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
I am getting Stack Overflow error when adding code, it might be a bug in Stack Overflow, so please follow the link.
Set line-height: 100px; to .heighted or .middle-wrapper or .middle - DEMO
CSS:
.heighted {
background: gray;
height: 100px;
line-height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
HTML:
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
You should try display:table-cell; and use vertical-align:middle;
Check how amazing and optimize:
http://jsfiddle.net/9jugdtqx/2/
and:
http://jsfiddle.net/9jugdtqx/3/