I have used my custom framework for responsive.
In mobile view less than (768px resolution) textbox is breaking my container. It goes oustside the container and not considering the container padding.
Here is my html:
<div class="container">
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
</div>
Here is the CSS :
* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto; }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC; }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; }
#media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}
FIDDLE LINK
You have to just use box-sizing: border-box; in your input CSS file.
So your code will be:
<div class="container">
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
</div>
CSS :
* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto; }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC; }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; box-sizing: border-box; }
#media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}
Your input width is currently 100% + padding making it more than 100% of it's parent. To prevent this you need to change the box-sizing property to border-box from the default content-box:
input {
box-sizing: border-box;
}
Edited Fiddle
FURTHER READING
Related
I have a sidebar which is only taking up enough space for the content it contains rather than taking up 100% of the wrapper which contains all elements, the image below should get across what I mean:
Here is some of the code I'm working with:
HTML
<body>
<div id="wrapper">
<div id="top">
...
</div>
<div id="topnav">
<...
</div>
<div id="banner">
<img id="img" src="images/2for20.png" alt="banner1" />
</div>
<div id="subbanner">
...
</div>
<div id="content">
...
</div>
<div id="rightSide">
<p>This is the sidebar</p>
</div>
<div id="footer">
<p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
</div>
</div>
</body>
CSS
#wrapper
{
width:1000px;
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:220px;
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
This works for me:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
> #wrapper
{
width:100%; //change this to 100%
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:100%; //Change this to 100%
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
Hello guys I have a small form within a div I have already centered it but the img with it can't be center properly with it its always kinda on top or in the bottom i want the h4/form/img to appear as if they are on one line here is the code:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
HTML:
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
</div>
http://jsfiddle.net/mohamedkna/djhL2z27/
Thanks in advance
You need to set vertical-align to img:
img {vertical-align: middle}
http://jsfiddle.net/djhL2z27/4/
Try like this: Demo
CSS:
form {
margin:0px;
display:inline-block;
line-height:40px;
vertical-align:middle;
}
img {
display:inline;
line-height:40px;
vertical-align:middle;
}
Add vertical-align: middle to the img and form. That should more or less do the job. The rest fine tuning u can do.
Try using align attribute:
<div class="outer">
<div class="inner" align="center">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
You have problem here:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
Change to this:
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.inner {
text-align:center
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
Please update css. All content will be in center as you need
function useless() {
alert(hello);
}
.outer {
display:block;
max-width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
}
body {
background:#dee
}
form {
margin:0px;
display:inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
display:inline-block;
vertical-align: middle;
}
h4 {
display:inline-block;
vertical-align: middle;
margin:0px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
A different way is to use negative margin (not good for ie <8)
img {
margin-bottom:-15px;
display:inline;
}
I'm creating a website which seems to work fine with the following method on a desktop computer, but when I test it on an iPad and the content extends over the footer, the footer doesn't get pushed down, but overlaps the content.
My HTML is:
<body>
<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
<div id="mainuser">
<span id="left"><jdoc:include type="component" /></span>
<span id="right"><jdoc:include type="modules" name="position-7" style="xhtml" />
</span>
</div>
</div>
<div id="ft">
...
</div>
</div>
</body>
Here's the CSS:
html {
height: 100%;
padding:0;
margin:0;
}
body{
height:100%;
margin:0;
padding:0;
text-align:left;
}
#wrapper {
min-height: 100%;
position:relative;
}
#main{
width:700px;
background:transparent;
}
#mainuser {
margin-top:40px;
width:700px;
text-align:left;
background:#fff;
}
#left {
float:left;
width: 540px;
}
#right {
float:right;
width:150px;
text-align:left;
background:transparent;
color: #e10000;
margin-right:5px;
margin-top:5px;
}
#ft {
width:100%;
height:60px;
border-top:1px solid #527988;
position:absolute;
left:0;
bottom:0;
}
I also tried to insert a div between the content and the footer with clear:both, but it didn't work.
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)
http://jsfiddle.net/z3Jue/20/
I cannot get all of my (inline-block) elements to align to the top of their container div.
I've tried these items in a list, floated left (but cannot center) and a lot of other random things but nothing seems to work.
Any help appreciated!
CSS
#buttons{
margin: 0 auto;
padding:0px;
border:1px dotted black;
height:60px;
}
.block img{
display:inline-block;
*display: inline;
zoom: 1;
height:60px;
width:40px;
border:0;
}
.block{
display:inline-block;
*display: inline;
zoom: 1;
border:1px solid red;
height:60px;
width:40px;
margin:0px;
padding:0px;
}
#search {
display:inline-block;
*display: inline;
zoom: 1;
height:60px;
width:240px;
border:1px solid red;
margin:0px;
padding:0px;
}
#searchTextForm{
font-size:16px;
width: 185px;
color:#333;
margin-top:3px;
border:1px dotted blue;
margin-top:15px;
}
HTML
<div id="buttons" align="center">
<div id="search" >
<form method="get" name="tipue" action="search/results.html" target="toolbarlongTOC" title="search">
<input type="text" id="searchTextForm" name="d" class="field" size="25" >
</form>
</div>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">
<a href="#" id="bookmarks">
<img src="http://i.imgur.com/cbb92jF.jpg">
</a>
</div>
<div class="block">3</div>
Set .block {vertical-align: top}. Done.
http://jsfiddle.net/z3Jue/22/
Instead of height to your parent div you can use line-height and use vertical-align to the child blocks. See this demo: http://jsfiddle.net/z3Jue/25/