Divs not lining up in Bootstrap/Javascript checkbox menu

Divs not lining up in Bootstrap/Javascript checkbox menu - javascript

I made this checkbox menu. I want all divs to line up under and around each other when each box is checked, which some do beautifully, using Bootstrap. However, when you check "Research Methods," the two divs are separated from eachother and don't line up at the top/next to each other. I am wondering why this is? Here is a live demo:
http://dev.wwnorton.com/sandbox/showcase2015/test/OEBPS5/1-ChooseANorton.html
Here is the code:
Javascript:
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych').show():$('#dvIntroPsych').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych1').show():$('#dvIntroPsych1').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych2').show():$('#dvIntroPsych2').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch').show():$('#dvResearch').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch2').show():$('#dvResearch2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych').show():$('#dvSocPsych').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych2').show():$('#dvSocPsych2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych3').show():$('#dvSocPsych3').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych').show():$('#dvCogPsych').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych2').show():$('#dvCogPsych2').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych').show():$('#dvPersonPsych').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych2').show():$('#dvPersonPsych2').hide();
});
$('#chkDevPsych').click(function(){
this.checked?$('#dvDevPsych').show():$('#dvDevPsych').hide();
});
$('#chkHistory').click(function(){
this.checked?$('#dvHistory').show():$('#dvHistory').hide();
});
});
And CSS:
.spacer {
height: 10px;
width: 100%;
clear: both;
}
.bookcontainer {
width: 100%;
float: left;
display: block;
min-height: 260px;
margin: 5px;
padding: 20px;
-moz-box-shadow: 0 0 5px #acacac;
-webkit-box-shadow: 0 0 5px #acacac;
box-shadow: 0px 0px 5px #acacac;
border-radius:5px;
vertical-align: top;
background-color: #ffffff;
}
.bookcontainer .book img {
border: 1px solid #bbbbbb;
width: 20%;
height: 20%;
float: left;
margin-right: 15px;
vertical-align: top;
padding: 0;
position: relative;
top: 5px;
overflow: hidden;
}
.maintoc {
width:100%;
clear: both;
margin-top: 30px;
margin-bottom: 30px;
}
.maintoc a {
text-decoration: none;
}
label {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#0092c8;
font-size:15px;
}
input[type="checkbox"]{
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: white;
box-sizing: border-box;
position: relative;
box-sizing: content-box ;
width: 25px;
height: 25px;
border-width: 0;
position: relative;
margin-right: 5px;
margin-bottom: -5px;
}
input[type="checkbox"]:checked{
background-color: #0092c8;
}
input[type="checkbox"]:focus{
outline: 0 none;
box-shadow: none;
}
.ckbatch {
float: left;
display: inline-block;
height: 100%;
margin: 10px;
}
.ckbatchcontainer {
float: left;
display: inline-block;
height: 100%;
margin-bottom: 5px;
padding: 0;
}
.TOCtext {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#948973;
font-size:15px;
}
.TOCtext a {
margin: 0;
padding: 0;
}
.TOCimage {
height: 150px;
margin: 0 auto;
position: relative;
display: block;
padding-bottom: 10px;
}
Thank you in advance for any and all help! I've been wracking my brain for a week and in forums to try and fix this simple issue.

To answer in a well explaining way probably bust this comment, therefore I'll provide only a working solution for your problem. So just add these lines of Javascript:
$('.ckbatchcontainer [type=checkbox]').click(function(){
var id=$(this).attr('id').replace(/chk/, '[id^=dv') + ']';
var target = $(id).parent();
target.siblings(':not([style])').hide();
this.checked ? target.show() : target.hide();
});

Related

Collapsed navbar not closing on button click

I know there are similar questions posted but the solutions aren't working for me. Can anyone help me take a look?
I tried shifting the data-toggle and data-target into ahref too but it doesn't work. Not sure if it has anything to do with the css. Thanks for the help in advance!
.navbar a {
text-decoration: none;
color: black;
}
.navbar a.navbar-brand {
height: inherit;
line-height: inherit;
padding-top: 25px;
font-size: 32px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 38px;
font-weight: 700;
}
.navbar {
margin: 0 auto;
text-align: center;
}
.nav {
height: 52px;
width: 100%;
background-color: #4679b2;
position: relative;
z-index: 10;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 7px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 14px 20px 12px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>#nav-check {
display: none;
}
#media (max-width:850px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)+.nav-links {
height: 0px;
}
.nav>#nav-check:checked+.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
<div class="nav-links" data-toggle="collapse" data-target=".nav-collapse.in">
Auditorium
Exhibition
Hotel
</div>

I'm not sure, but I think the data-target attribute should reference an id. You referenced .nav-collapse.in, which is a class.
Try to give your nav-bar an id.

Why the height of div make a gap between the image and div?

Here is my html struct, simple
<div> <img style="width:100%;height:100%"/> </div>
div shows in the chrome:
and the image, there is a gap between the div and image
noticed that the image supposed to cover the div,
if I change the height of div more than 10px, looks perfect.
the image cover the div
I've tested if the height of div is less, the gap is bigger.
So what's the problem?
there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:
._display_style {
display: none;
}
.sketchup_display_style {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
.cab_list_form #shape div img {
width: 80%;
height: 80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding: 0.2em 0 0.6em;
text-align: center;
background-repeat: no-repeat;
cursor: pointer;
}
.cab_list_form #shape div span {
width: 100%;
display: block;
}
.toggle-red {
border: 2px solid red;
}
.cab_style_img {
background-color: #fff;
border: 2px solid #ebebeb;
text-align: center;
}
.cab_style_img img {
width: 290px;
height: 240px;
}
.question_img {
padding-right: 1em;
float: left;
}
#cab_condition table td label {
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius: 20px;
text-align: center;
width: 55px;
height: 20px;
line-height: 20px;
margin: auto;
background-color: #ffffff;
cursor: pointer;
padding: 0 0.5em;
}
#cab_condition table td label input {
display: none;
}
#cab_condition table td label span {
margin: 0.1em 0.6em;
}
.howmanypart_td span {
margin: 0.1em 0.7em;
}
.down_search div {
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
height: 30px;
line-height: 30px;
color: #30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select {
border: 1px solid #bdbdbd;
width: 130px;
height: 28px;
border-radius: 20px;
/*text-align:center;*/
color: #30b2ba;
cursor: pointer;
}
.door-background {
position: absolute;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
padding: 0;
margin: 0;
}
.door-background th,
.door-background td {
border: 2px solid #999;
border-width: 0 2px 2px 0;
padding: 0;
}
.tableizer-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tableizer-table th,
.tableizer-table td {
border: 1px solid #999;
border-width: 0 1px 1px 0;
padding: 2px;
}
.wardrobe_type_list {
width: 100%;
height: 40px;
}
.wardrobe_type_list .groups_check {
float: left;
margin-right: 25px;
height: 25px;
line-height: 25px;
}
.wardrobe_type_list .groups_check img {
height: 100%;
}
.wardrobe_type_list .groups_check input[type=radio] {
height: 25px;
line-height: 25px;
}
.display-none {
display: none;
}
.search-container {
float: left;
}
body {
font-size: 14px;
margin: 15px;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
}
.pax_highlight {
position: absolute;
border: solid 3px #329afb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 3;
}
.pax_highlight_text {
color: #329afb;
font-weight: bold;
font-size: 12px;
bottom: 0px;
margin-bottom: -19px;
position: absolute;
text-align: center;
}
#groups_list {
left: 10px;
position: relative;
}
#white_hide_menu {
background-color: white;
height: 51px;
position: absolute;
top: 517px;
width: 5px;
display: none;
}
.menu_groups {
height: 140px;
overflow: hidden;
position: relative;
width: 100%;
}
.thumbs_layers_div_a {
display: none;
}
.items div {
float: left;
}
.items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.thumbs_layers_group {
height: 100px;
}
.thumbs_layers_div {
background-color: white;
cursor: pointer;
float: left;
margin-left: 8px;
padding: 1px;
width: 93px;
height: 93px;
text-align: center;
display: inline-block;
display: inline;
}
.thumbs_layers_div_selected {
border-color: #389CFC;
border-width: 3px;
background-color: #389CFC;
}
.thumbs_layers_div img {
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
height: 91px;
}
.thumbs_layers_add_item {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.thumbs_layers_div_selected img {
border-color: #389CFC;
}
.pax {
height: 180px;
}
#layers_pax_buffer {
pointer-events: none;
}
#layers_pax_buffer {
display: none;
border: 1px solid #CCCCCC;
width: 1048px;
height: 585px;
position: absolute;
top: 98px;
}
.val {
width: 1048px;
height: 150px;
}
#dialog-confirm,
#dialog-confirm2 {
display: none;
}
.pax_h_dimension {
display: none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display: none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder: 2px solid grey;
position: relative;
margin: 10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder: 1px solid green;
background: #f0f0f0;
overflow: hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width: 800px;
margin: 0 auto;
height: auto;
}
.attr {
width: 90%;
float: left;
}
.name {
width: 90%;
text-align: left;
margin: 10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height: 18px;
border: 1px solid #bbb;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
cursor: pointer;
}
#message {
width: 140px;
height: 80px;
border: 3px solid #ddd;
margin: 5px;
padding: 10px;
float: left;
background: #eee;
}
#message div {
margin-bottom: 10px;
}
.button {
width: 150px;
height: 40px;
padding: 10px;
float: right;
xmargin-top: 300px;
}
.button button {
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width: 80px;
height: 30px;
margin: 5px;
font-size: 14px;
xfloat: right;
}
.pax {
border: 3px solid #eee;
height: auto;
margin: 20px;
overflow: hidden;
min-width: 800px;
xoverflow-y: hidden;
}
#items_scroll {
overflow-x: scroll;
padding: 5px;
}
.thumbs_layers_div {
overflow: hidden;
height: 120px;
}
.wardrobe_type_list {
xpadding-top: 10px;
xpadding-left: 10px;
xwidth: 90%;
margin: 10px;
margin-bottom: 0;
}
#items {}
.thumbs_layers_div_selected .thumbs_layers_add_item {
color: white;
}
.v #items img {
width: 95px;
height: auto;
}
.v .thumbs_layers_div {
height: 70px;
}
<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
<div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>%E5%B7%A6</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>copyRight</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>dingxian</div>
<div>宽度:2100</div>
<div>高度:65</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>

Try to this
img {
vertical-align: top;
}
because img vertical-align is
baseline - the default value.
more about vertical-align

#Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually.
The problem is easy to solve ,one solution is setting the display attribute as block for the img.
please try it
img{
display:block;
}

Responsive search box issue, need help please

Currently, I use PrestaShop, and I wanted to change the width of search box, but, when I change the width of search box to 650px, on desktop it's ok, but on mobile the search box is very long — not responsive at all. Can you help with this issue please?
#search_block_top {
padding-top: 30px;
width: 650px;
}
#search_block_top #searchbox {
float: left;
width: 100%;
margin-top: -20px;
}
#search_block_top .btn.button-search {
background: #7ab55c;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
padding: 10px 0 11px 0;
}
#search_block_top .btn.button-search span {
display: none;
}
#search_block_top .btn.button-search:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 17px;
width: 100%;
text-align: center;
}
#search_block_top .btn.button-search:hover {
color: #6f6f6f;
}
#search_block_top #search_query_top {
display: inline;
padding: 13px 60px 13px 13px;
height: 40px;
background: #fbfbfb;
margin-right: 1px;
}
.ac_results {
background: #fff;
border: 1px solid #d6d4d4;
width: 271px;
margin-top: -1px;
}
.ac_results li {
padding: 0 10px;
font-weight: normal;
color: #686666;
font-size: 13px;
line-height: 22px;
}
.ac_results li.ac_odd {
background: #fff;
}
.ac_results li:hover,
.ac_results li.ac_over {
background: #fbfbfb;
}
form#searchbox {
position: relative;
}
form#searchbox label {
color: #333;
}
form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left;
}
form#searchbox .button.button-small {
float: left;
}
form#searchbox .button.button-small i {
margin-right: 0;
}
enter image description here

Try setting max-width
#search_block_top {
padding-top: 30px;
width: 100%;
max-width: 650px;
}

You can maybe use media queries and write something like that:
#search_block_top {
padding-top: 30px;
width: 650px;
#media screen and (max-width: 650px) {
width: 95%;
}
}

Margin on the right side of my form magically changing?

I'm trying to center my form but it's got a magic margin on the right. I've tried to make my form responsive but when I resize my window down, my submit button just doesn't want to center either, any tips?
http://jsfiddle.net/z85687ne/1/ - use SCSS on languages
a

You're generally lacking box-sizing property to be set to border-box, so your elements could include margins and paddings into overall calculations of their sizes.
Then you can set them up to width:100% as so:
CSS:
#import "elements.less";
#import "normalize.less";
#import "var.less";
#main {
p {
a {
}
}
}
body {
.font();
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
border: 4px #blue solid;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
border: 2px black solid;
margin: 20px auto 20px auto;
width: 80%;
}
#contact-area {
width: 600px;
margin-top: 25px;
margin: 0 auto;
border: 2px black solid;
padding: 15px;
input, textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
textarea {
height: 200px;
}
textarea:focus, input:focus {
border: 2px solid #900;
}
input.submit-button {
width: 100px;
float: right;
background-color: #0066FF;
text-transform: uppercase;
}
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#main {
p {
}
}
.post-it{
margin-top: 50px;
}
.note {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
background: #eae672;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
p {
color: black;
.tr(all 0.3s linear);
&.class1 {
}
&:hover {
color: lime;
.tr(all 0.3s linear);
}
}
#media screen and (max-width: 1000px) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#contact-area {
width: 100%;
input, textarea {
width: 100%;
}
input.submit-button {
width: 100%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
}
JSFiddle for that

It seems to me that you need some extra level of control over your elements. It could be done with a div within your form.
<form>
<div class="form-element">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
</div>
</form>
Then you can control the form with
#contact-area {
width: 100%;
max-width: 600px;
.form-element {
width: 470px;
margin: 0 auto;
> label {
width: 125px;
display: inline-block;
}
> input,
> textarea {
display: inline-block;
}
}
}
And don't float your submit button right if you want it to be centered.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Develop Reference

JavaScript is the programming language of the Web.

Divs not lining up in Bootstrap/Javascript checkbox menu - javascript

Related

Collapsed navbar not closing on button click

Why the height of div make a gap between the image and div?

Responsive search box issue, need help please

Margin on the right side of my form magically changing?

How do I get a div to move with window resize without pushing other divs out of the way?

Categories

Resources