I have this web page and I can't seem to get the widths of these objects to align. I could manually adjust the width per pixel but that seems like it would be avoiding the actual problem.
I am wanting the homeLinkContainer to be directly under the search box and exactly the same width but I cannot seem to be able to do this.
<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
html {
background: #FFFFEC;
}
#search {
width: 390px;
margin-left: auto;
margin-right: auto;
padding-right: 10px;
}
#searchBox {
width: 100%;
border: 1px solid #E6e6e6;
font-size: 25px;
padding-left: 10px;
}
#searchBox:hover {
border: 1px solid #bebebe;
transition-property: border-color;
transition-duration: 0.2s;
}
#homeLinkContainer {
width: 400px;
height: 400px;
background: #FFF;
border: 1px solid #E6e6e6;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
</STYLE>
</HEAD>
<BODY>
<form ID="search" method="get" action="https://next.duckduckgo.com/">
<input ID="searchBox" type="text" name="q" id="s" class="input" placeholder="Search" autofocus="autofocus" />
</form>
<DIV ID="homeLinkContainer">
Contents
</DIV>
</BODY>
</HTML>
#search {
width: 402px; /* accounts for the 2 pixels of border that the bottom div has */
margin-left: auto;
margin-right: auto;
/* padding-right: 10px; */ /* why was that here? */
}
#searchBox {
width: 100%;
border: 1px solid #E6e6e6;
font-size: 25px;
padding-left: 10px;
box-sizing: border-box; /* makes the padding not mess with the width */
margin: 0; /* input elements sometimes have default margins */
}
#homeLinkContainer {
width: 400px;
height: 400px;
background: #FFF;
border: 1px solid #E6e6e6;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
You have to take care of your BORDER. If you add a Border it adds the Borders Pixels around the box... So try to resize the hovered Box.
Related
<div class="searchbox">
<form>
<input type="text" name="src-txt" class="src-txt"/>
<input type="submit" value="" name="src-btn" class="src-btn"/>
</form>
</div>
.searchbox {
float: left;
width: 35%;
height: 30px;
margin-top: 25px;
margin-left: 3%;
border: 1px solid red;
}
.src-txt {
float: left;
width: 80%;
height: 100%;
border: 2px solid #3682c4;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 5px;
}
.src-btn {
float: left;
width: 15%;
height: 100%;
background-color: #3682c4;
background-image: url("../content/src_img.png");
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
This is code it's working fine but after I add !DOCTYPE html at head search button's height decreased.
I can't understand what changed.
What is the reason?
What should I change on my code?
Couldn't you just increase the height after adding the !DOCTYPE html?
Is your html tag set to 100% height? Sometimes that has caused issues with my code.
From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I have a login box DIV and below that another login button DIV which is 1% margin top from the Login Box DIV.
The login box div has these styles:
.login-box {
height: 39%;
width: 100%;
}
.login-box-wrap {
width: 30%;
height: 98%;
margin: 0 auto;
border: 1px solid #3f3f3f;
background-color: #609ac4;
border-radius: 5px 5px 5px 5px;
margin-top: 1%;
min-width: 250px;
max-width: 500px;
max-height: 350px;
min-height: 100px;
}
.logintextbox {
background-color: transparent;
border: none;
border-bottom-color: rgba(176, 221, 245, 1);
border-bottom-style: solid;
border-bottom-width: 2px;
width: 98%;
height: 32%;
font-size: 1.2em;
font-family: open sans;
color: white;
padding-left: 2%;
}
Then when i shrink it alittle more then button overlaps the box like this:
This is the login button styles:
.login-button {
height: 5%;
width: 100%;
margin-top: 1%;
position: fixed;
}
.login-button-wrap {
width: 30%;
height: 100%;
margin: 0 auto;
min-width: 250px;
max-width: 500px;
min-height: 20px;
max-height: 31px;
}
#btnLogin {
height: 100%;
width: 100%;
background: linear-gradient(#73afda,#609ac4);
border: 1px solid #3f3f3f;
border-radius: 5px 5px 5px 5px;
font-family: Arial;
color: white;
font-size: 15px;
}
How can i keep the button around 10px/1% margin top from the box at all resolutions
**EDIT: **
Here is the HTML
<div class="login-box">
<div class="login-box-wrap">
<input id="txt_client_reference" type="text" class="logintextbox" placeholder="Client Reference" />
<input id="txt_postcode" type="text" class="logintextbox" placeholder="Postcode" />
<input id="txt_date_of_birth" type="text" class="logintextbox" placeholder="Date of Birth" />
</div>
</div>
<div class="login-button">
<div class="login-button-wrap">
<asp:Button ID="btnLogin" runat="server" Text="Log in" CssClass="loginButton" OnClientClick="checkForm(); valid_postcode()" />
</div>
</div>
I might be a little far off on this one, but you have position fixed there, which doesn't really care about your margin anymore.
I am having a problem in which a the post button for a text box is being pushed down when the screen is resized as demonstrated in the pictures:
From this:
To this:
The width of the text box is 83% and the width of the post button is 14% which adds up to 97%. I thought with a liquid layout, as long as the width percentages do not go over 100%, you are fine? Can someone explain why this is happening as I cant seem to figure it!
Here is my HTML:
<div class="pageWrapper">
<div class="newsfeedPostForm">
<form action="public_posts.php" method="POST">
<textarea id="newsfeedPost" name="post" rows="5" cols="90"></textarea>
<input type="submit" name="send" class="postFormSubmit" value="Post">
</form>
</div>
<div>
And my CSS:
#pageWrapper {
width: 56%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #cad3dc;
border-right: 1px solid #cad3dc;
}
.newsfeedPostForm {
width: 71%;
height: 77px;
background-color: #e5e6e7;
padding: 5px;
margin-bottom: 3px;
}
#newsfeedPost {
background-color: #FFFFFF;
width: 83%;
max-height: 66px;
margin-top: 4px;
margin-left: 4px;
font-weight: bold;
}
.postFormSubmit {
background-color: #DCE5EE;
position:relative;
float: right;
width: 14%;
height:69px;
margin-right: 4px;
}
Use box-sizing: border-box on .newsfeedPostForm. That should solve your problem.
.newsfeedPostForm {
box-sizing: border-box;
.....
}
You can read here for more information on box-sizing and the problem it solves.
I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs