I have a page that looks like this jsfiddle, code below:
html:
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
css:
.parent { width: 500px; }
.child { width: 100%; }
How do I get it so that together they take up 100% of the parent div width (with the text input stretching accordingly)?
To clarify: I want the button(s) in a row to be fixed width and the input to take up the remaining width of the parent so that together the width = parent width. In the case that there are no button in the row, I'd like the textinput to take up the whole width.
.parent { width: 500px; margin:auto; }
.child { width: 100%; }
add this to make input stretches to full width
.child input { width: 100%; }
There are many ways to do this. One way to do this is to use the display:table-x attribute.
If you wrap the input elements in a div of their own like so:
<div class="parent">
<div class="text">
<input type="text" />
</div>
<div class="button">
<input type="submit" />
</div>
</div>
Then style the parent as display:table, the wrapper div's as display:table-cell, and give a width to div.button, like so:
.parent {
width: 500px;
background-color:blue;
display:table;
}
.text {
display:table-cell;
}
.text input {
width:100%;
-webkit-appearance:none;
}
.button {
display:table-cell;
background-color:red;
width:100px;
}
Then you can achieve the result you are looking for: http://jsfiddle.net/QpCCD/9/
This is similar to #panindra's post, but it keeps both inputs on the same line.
I've added some color to the sample to be able to see the position on the screen.
<html>
<head>
<style type="text/css">
body { background-color: black; }
.parent { width: 500px; background-color: white; text-align: center; }
.child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; }
.child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
</body>
</html>
Actually, this would be closer:
.child input { width: 248px; }
Related
I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.
How it looks right now
What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".
I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.
The CSS code:
body{background-color: black}
.wrapper
{
background-color: grey;
padding: 0;
margin: 0;
}
input
{
font-size: 30px;
}
.button
{
background-color: green;
padding-left: 10px;
width: 100px;
height: 100%;
display: inline-block;
}
and the HTML code:
<body>
<div class="wrapper">
<input type="text" size="5"/>
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.
Thankful for any advice.
Just use flexbox
body {
background-color: black
}
.wrapper {
background-color: grey;
padding: 0;
margin: 0;
display: flex;
}
input {
font-size: 30px;
}
.button {
background-color: green;
padding-left: 10px;
width: 100px;
}
<body>
<div class="wrapper">
<input type="text" size="5" />
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
On the wrapper class add display: flex; and on the input tag add flex: stretch;
I have .container > .wrapper > img. Here is a task:
img must have maximum width/height possible, keeping it's aspect ratio, being 100% visible and not exceeding the .container's size.
Image must not exceed it's natural size.
Width/height of the image are not known.
.container is known to be of a fixed (in pixels) width/height, but exact dimensions are not known.
.wrapper must tightly fit the img (must have same width and height as the image). Wrapper is a special element to put content over the image, e. g. badges. I added example labels to the snippet to demonstrate this. This should somehow be possible.
Markup:
<div class="container">
<div class="wrapper">
<div class="label">new!</div>
<img src="https://via.placeholder.com/150x300">
</div>
</div>
I thought I can use display: block; max-height: 100% for the img, but it does not work, because .wrapper (image parent) height is not fixed, and it can't be fixed - see point 5.
What else can I do to achieve described task with pure CSS? I'd prefer solution that works in IE11, but others will be also appreciated.
EDIT: It is really important that container and image can be of any size. I added settings to the snippet for tests on different sizes.
If an image is larger than container, it should render not larger than container.
If an image is smaller than container, it should render not larger than is's natural size.
It should work with horizontal container/vertical image AND vertical container/horizontal image.
EDIT 2: It is also really important that .wrapper is not just a "nasty interfering" element. It is functional: wrapper is used to place absolute positioned content over the image inside it (e.g. labels, badges), it must support transforms (mirror, translate), css filters etc, generally speaking - all the stuff we usually do with block elements.
Playground:
$(function() {
$('input[name=container-width]').on('change', function() {
$('.container').css('width', $(this).val() + 'px')
})
$('input[name=container-height]').on('change', function() {
$('.container').css('height', $(this).val() + 'px')
})
$('input[name=image-width]').on('change', function() {
var width = $(this).val()
var height = $('input[name=image-height]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
$('input[name=image-height]').on('change', function() {
var height = $(this).val()
var width = $('input[name=image-width]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
})
.container {
width: 200px; /* can have any value in pixels */
height: 200px; /* can have any value in pixels */
background-color: green;
}
.wrapper {
outline: 1px solid yellow;
position: relative; /* for label */
}
.label {
position: absolute;
background-color: blue;
color: white;
}
.label.-top-left {
top: 10px;
left: 10px;
}
.label.-bottom-right {
bottom: 10px;
right: 10px;
}
<h2>Settings</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Container: width <input type="number" step="10" name="container-width" value="200"> height <input type="number" step="10" name="container-height" value="200">
<br>
Image: width <input type="number" step="10" name="image-width" value="150"> height <input type="number" step="10" name="image-height" value="300">
<br>
<br>
<h2>Demo</h2>
<div class="container">
<div class="wrapper">
<div class="label -top-left">new!</div>
<div class="label -bottom-right">good!</div>
<img src="http://via.placeholder.com/150x300">
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>How it should look like</h2>
<p>This is not the solution, because is has many hardcoded dimensions. It's just a visual demo of what I want to achieve.</p>
<div style="width: 200px; height: 200px;background-color: green">
<div style="width: 100px; height: 200px; position: relative;outline: 1px solid yellow">
<div style="position: absolute;
top: 10px;
left: 10px;
background-color: blue;
color: white;">new!</div>
<div style="position: absolute;
bottom: 10px;
right: 10px;
background-color: blue;
color: white;">good!</div>
<img style="max-width: 100%; max-height: 100%;" src="http://via.placeholder.com/150x300">
</div>
</div>
Does this work for you?
.container {
width: 200px;
/* can have any value in pixels */
height: 200px;
/* can have any value in pixels */
background-color: green;
}
.container-2 {
width: 300px;
height: 300px;
}
.wrapper {
outline: 1px solid yellow;
display: inline;
height: inherit;
}
img {
width: auto;
max-height: 100%;
display: inline-block;
vertical-align: bottom;
}
<div class="container">
<div class="wrapper">
<img src="http://via.placeholder.com/150x300">
</div>
</div>
<br>
<div class="container container-2">
<div class="wrapper">
<img src="http://via.placeholder.com/30">
</div>
</div>
check out below code this should work for you
you need to apply max-width: 100% and max-height:100% to your img
and display: inline; to your img parent div
.container {
width: 200px; /* can have any value in pixels */
height: 200px; /* can have any value in pixels */
background-color: green;
}
.wrapper {
outline: 1px solid yellow;
display: inline;
}
.wrapper img{
max-width: 100%;
max-height: 100%;
height: auto;
vertical-align: top;
}
<div class="container">
<div class="wrapper">
<img src="http://placehold.it/150x300">
</div>
</div>
<hr/>
<div class="container">
<div class="wrapper">
<img src="http://placehold.it/1500x800">
</div>
</div>
Update
Added vertical-align: top; to image to fixed extra gap at bottom as pointed out by #TemaniAfif
Add image using background-image on wrapper element
.wrapper {
outline: 1px solid yellow;
background: url(http://via.placeholder.com/150x300);
background-size: cover;
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
$(function() {
$('input[name=container-width]').on('change', function() {
$('.container').css('width', $(this).val() + 'px')
})
$('input[name=container-height]').on('change', function() {
$('.container').css('height', $(this).val() + 'px')
})
$('input[name=image-width]').on('change', function() {
var width = $(this).val()
var height = $('input[name=image-height]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
$('input[name=image-height]').on('change', function() {
var height = $(this).val()
var width = $('input[name=image-width]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
})
.container {
width: auto; /* can have any value in pixels */
height: auto; /* can have any value in pixels */
background-color: green;
}
.wrapper {
width: 100%;
height: 100%;
outline: 1px solid yellow;
}
.container > .wrapper > img {
width: 100%;
height: 100%;
opacity: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Settings</h2>
Container: width <input type="number" step="10" name="container-width" value="200"> height <input type="number" step="10" name="container-height" value="200">
<br>
Image: width <input type="number" step="10" name="image-width" value="150"> height <input type="number" step="10" name="image-height" value="300">
<br>
<br>
<h2>Demo</h2>
<div class="container">
<div class="wrapper">
<img src="http://via.placeholder.com/150x300">
</div>
</div>
What about this ?
.container{
width: 200px;
height: 200px;
background-color: green;
}
.wrapper {
outline: 1px solid yellow;
height:100%;
}
img{
height: 100%;
}
I have a side menu which i would like to keep at 100% page height.
The code is basically just like this right now:
body,
html {
width: 100%;
height: 100%;
}
.sideMenu {
width: 200px;
height: 100%;
float: left;
}
The problem with this is that the side menus height does not extend with the rest of the page. For example I have input fields that can be added to a form, and when a few inputs have been added the form extends below the original view port. While the menu does not.
Heres a jsfiddle to demonstrate https://jsfiddle.net/m5yfqdsu/, click the "add row" button to add inputs until theyre below the viewport.
So what is the best solution to keep the menu at 100% height?
Prefer a CSS solution, but JS works as well if needed.
Add position: fixed; to .sideMenu
// just a quick function to add more inputs
$(document).ready(function() {
$(".add").on("click", function() {
$("fieldset").append("<div class='rowContainer'><label>Label:</label><input type='text' /></div>");
});
});
* {
margin: 0;
padding: 0
}
body,
html {
width: 100%;
height: 100%;
}
fieldset {
padding: 10px;
}
.sideMenu {
width: 200px;
height: 100%;
background-color: #1c1c1c;
position: fixed;
top: 0;
left: 0;
}
.wrapper {
margin-left: 200px;
}
input {
width: 100%;
max-width: 400px;
height: 40px;
display: block;
margin-bottom: 20px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideMenu"></div>
<div class="wrapper">
<h1>Page Title</h1>
<form>
<fieldset>
<div class="rowContainer">
<label>Label:</label>
<input type="text" />
</div>
<div class="rowContainer">
<label>Label:</label>
<input type="text" />
</div>
<div class="rowContainer">
<label>Label:</label>
<input type="text" />
</div>
</fieldset>
</form>
<button class="add">Add row</button>
</div>
You can solve this in multiple ways.
One way is to make a container having 100% height, making its child elements scrollable. That way you don't need the actual absolute rule, but it does achieve the same result. I prefer not using absolute because that makes it easier if you want it to be responsive eventually.
That way, you can scroll the sidebar and content seperatly. Both won't be bigger then they need to be. If the sidebar grows, it will be scrollable too.
* {
margin:0;
padding:0;
}
html, body, .wrapper {
height:100%;
}
.wrapper {
position:relative;
overflow-y:hidden;
}
.sidebar {
width:100px;
float:left;
height:100%;
overflow-y:auto;
background-color:red;
}
.content {
width:300px;
float:left;
height:100%;
overflow-y:auto;
background-color:blue;
}
.spacer {
height:1000px;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="content">
content
<div class="spacer">
spacer
</div>
</div>
</div>
I've HTML structure like following
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
and CSS as following
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
Output : (Normal screen size)
I want to expand "search-left" div width to the Search button.
Which should work properly for fluid responsive layouts too.
Here I've created fiddle if you wish to play : https://jsfiddle.net/j7g8143a/1
Now if I decrease the width of screen then the search button move to next line like following picture
but I want the "search-left" div to automatically adjust it's width according to screen size like following picture.
I need only CSS solution without using any media queries
EDIT: It should have to be compatible with IE9.
Here is your solution with demo and it will be work on IE9 also:
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
</div>
.box-search-select {
padding: 20px 68px 20px 0; /* give padding-right equal to button witdh */
position: relative;
}
.search-left input {
display: block;
width: 100%;
}
button {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #dddddd;
padding: 1px;
position: absolute;
right: 0;
top: 20px;
width: 60px;
}
Demo:
https://jsfiddle.net/0u83dbm7/
You can use Flexbox
.box-search-select {
display: flex;
align-items: center;
}
.search-left {
flex: 1;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>
You can also use CSS tables
.box-search-select {
display: table;
}
.search-left,
button {
display: table-cell;
vertical-align: middle;
}
.search-left {
width: 100%;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>
Its gonna work I think
<div class="box-search-select">
<div class="search-left" style="width:80%">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
<style>
#search{
width:100%;
}
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
</style>
please let me know if this is not the expected output.
Put your input and button inside the div and use display:flex
.box-search-select{
padding:20px 0;
float:left;
width:100%
}
.search-left{
float:left;
width:100%;
display:flex;
}
.search-left input{
width:100%
}
button{
float:right;
}
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
<button type="submit" class="button">Search</button>
</div>
<div style="clear:both"></div>
</div>
I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.
How can we avoid the creeping of the right content towards the left?
How can we make the height of left content increased till the height of right content (with javascript)?
<html>
<head>
<title>My Page</title>
<style type="text/css">
.myContent {
width: 100%;
}
.myHeader {
}
.leftPart {
border: 1px solid blue;
width: 200px;
clear: left;
float: left;
background-color: red;
}
.rightPart {
border: 1px solid orange;
width: 100%;
background-color: beige;
}
</style>
</head>
<body>
<header>
<div class="myHeader">
H
</div>
</header>
<div id="body">
<div class="myContent">
<div class="leftPart">
A
</div>
<div class="rightPart">
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
</div>
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="Text1" name="SalesAndMarketing" type="text" value="" />
</div>
</div>
</div>
</div>
</body>
</html>
fLoat one element, set margin to the other one.
.leftPart {
border: 1px solid blue;
width: 200px;
float: left;
background-color: red;
}
.rightPart {
margin-left: 200px;
border: 1px solid orange;
background-color: beige;
}
JSBin Demo
Update #1
If you consider using JavaScript, you might want to take a look at equalize.js.
equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.
Here is an example:
// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});
Here is the JSBin Demo.
Update #2
If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.
But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):
#body { display: table; width: 100%; }
.myContent { display: table-row; }
.leftPart {
width: 200px;
display: table-cell;
}
.rightPart {
display: table-cell;
}
Here is the JSBin Demo
Add this style:
.rightPart {
margin-left: 200px;
}