I am using a drop down for some additional content. I am not sure why but the drop down isn't working properly. When clicked on the 'read more' link it takes me back to my home page or refreshes to the home page. I made a jsfiddle and it's doing the same there. Any info on what I am doing wrong would be appreciated.
$('.expand-notice').on('click', function(e) {
e.preventDefault();
var parent = $(this.parentNode.parentNode);
parent.toggleClass('open-notice');
if (parent.hasClass('open-notice')) $(this).text('Less');
else $(this).text('Read more');
});
.notice {
background: #DDDDDD;
max-width: 40em;
margin: 0 auto 0.5em;
padding: 1em;
text-align: center;
font-family: sans-serif;
letter-spacing: 1px;
}
.notice p {
margin: 0;
}
.notice-type,
.notice-title {
font-family: sans-serif;
}
.notice-type {
text-transform: uppercase;
opacity: 0.8;
font-size: 11px;
letter-spacing: 2px;
}
.notice-title {
font-size: 20px;
}
.notice-content {
display: none;
text-align: left;
margin: 5px;
}
.notice-content p {
letter-spacing: 0;
padding: 5px;
}
.open-notice .notice-content {
display: block;
}
.recent-news {
margin: 0em auto;
max-width: 80em;
padding: 0 3% 2em;
overflow: hidden;
text-align: center;
}
.recent-news h2 {
margin-top: 0.5em;
}
.news-item {
display: inline-block;
margin: 1.5em 0 0 0;
width: 47.75%;
background: #fff;
padding: 2em 0em;
text-align: center;
vertical-align: top;
}
.news-item:nth-child(2n) {
margin-left: 3%;
}
.news-item p {
padding: 0em 1.5em;
margin: 0em;
line-height: 1.6;
}
.news-item p.news-date {
font-size: 0.95em;
}
<div class="page" data-subject-page="1">
<div class="largeText" data-subject-text="">
<div class="recent-news">
<h1>main title</h1>
<div class="notice">
<p class="notice-type">Date</a>
<p class="notice-title">sub title</p>
<div class="notice-content">
<p>Content here</p>
</div>
<p>Read more</p>
</div>
</div>
</div>
</div>
Remove the href attribute from a tag and wrap the scripts into
$(document).ready()
Please see the fiddle
As your Javascript code it suppose to show Content Here Less. Well. You have to do the following:
1- Be sure that you included the Jquery library
2- Place your Jquery code between script tag just before the closing </body> tag.
Checkout This DEMO
If you want to place your script in the head section, you have to use $document.ready(function(){// Your Code here});
Related
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
I'm trying to style a menu I built and I add a different class on each div element every time someone clicks on them. How can I remove the already added class from this element when I click anyone of the other 3 divs?
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
});
$('.garden-btn').click(function() {
$(this).addClass("active-btn-pink");
});
$('.technology-btn').click(function() {
$(this).addClass("active-btn-purple");
});
$('.auto-btn').click(function() {
$(this).addClass("active-btn-deep-purple");
});
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color: #555B66;
}
.active-btn-red {
background: #E53935;
color: #fff!important;
}
.active-btn-pink {
background: #D81B60;
color: #fff!important;
}
.active-btn-purple {
background: #8E24AA;
color: #fff!important;
}
.active-btn-deep-purple {
background: #5E35B1;
color: #fff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn">FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
I know that i could do something like that for each one of them:
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
$('.garden-btn').removeClass("active-btn-pink");
$('.technology-btn').removeClass("active-btn-purple");
$('.auto-btn').removeClass("active-btn-deep-purple");
});
But as I will add more than 20 elements in my menu, I would like to ask if there any smarter/shorter way to make this work.
As #disinfor said in the comments, you could do something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn" data-active-class ='active-btn-red '>FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color:#555B66;
}
.fashion-btn.active {
background:#E53935;color:#fff!important;
}
.garden-btn.active {
background:#D81B60;color:#fff!important;
}
.technology-btn.active {
background:#8E24AA;color:#fff!important;
}
.auto-btn.active {
background:#5E35B1;color:#fff!important;
}
$(".categories-sidebar-popup-menu-row" ).each(function (){
$(this).click(function(){
clearStyle();
$(this).addClass("active");
});
});
function clearStyle(){
buttonWithActive = $('.categories-sidebar-popup-menu-row.active');
buttonWithActive.removeClass('active');
}
JSFiddle
I nested 3 columns in the row div to align them horizontally and the social media icons will not be part of the row. I put width: 100%, float: left, and tried different ways to make the 3 columns lined up straight - no success.
This graphic below is the goal I need to succeed.
HTML and CSS
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 27px;
}
.box {
background-color: #f3f3f3;
color: #fff;
font-size: 150%;
width: 100%;
}
.box .box {
background-color: #f3f3f3;
color: #444;
}
.placeholder {
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
}
.sm-stw {
grid-column: 1;
grid-row: 1;
width: 573px;
}
.stw-box {
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 0 auto;
}
div.vertical-line {
width: 1px;
background-color: #979797;
height: 100%;
float: left;
margin: 0 15px 0 15px;
}
.sm-svrs {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.sm-hashtag-stw {
grid-column: 1/3;
grid-row: 2;
text-align: center;
}
<div class="box placeholder">
<div class="box sm-stw">
<div class="stw-box">
<div class="col">
<div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
<div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
</div>
<div class="col">
<div class="vertical-line" style="height: 75px;"></div>
</div>
<div class="col">
<h3>Seek the World</h3>
<p>(short content place here)</p>
</div>
</div>
</div>
</div>
I clean a little your css code, and i replace the grid with flex. Also there a lot of stuff that i think were useless, so i removed them.
As #hungerstar said in comment, you can set a border to one of the col, and add a little padding to make the vertical line.
It is better this way because it does not pollute the html.
Check the code, and tell me I you need more explanation !
$('#removeGrayMargin').on('click', function(){
if(!$(this).hasClass('active')) {
$(this).text('Put back gray margins');
$(this).addClass('active');
$('.main-container').addClass('with-margin');
}else {
$(this).text('Remove the gray margin');
$(this).removeClass('active');
$('.main-container').removeClass('with-margin');
}
});
.main-container {
background-color: #f3f3f3;
color: #444;
font-size: 150%;
width: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 30px 0;
}
.main-container.with-margin {
background: transparent;
}
.main-container.with-margin .box{
background: #f3f3f3;
}
.col-1 {
width: 30%;
text-align: right;
padding-right: 20px;
}
.col-2 {
width: 70%;
border-left: 1px solid #8C8C8C;
padding-left: 20px;
}
.col-2-title,
.col-2-p {
font-family: 'Source Sans Pro', sans-serif;
}
.col-2-p {
font-size: 14px;
margin-top: 0;
}
.col-2-title{
font-size: 27px;
margin-top: 5px;
margin-bottom: 20px;
}
.sm-logo + .sm-logo{
margin-top: 8px;
}
img {
/* Trick to remove the white space under the image */
vertical-align: middle;
}
button {
border-radius: 0;
background: #262626;
color: white;
border: 0;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="box">
<div class="col-1">
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
</div>
<div class="col-2">
<h3 class="col-2-title">Seek the World</h3>
<p class="col-2-p">(short content place here)</p>
</div>
</div>
</div>
<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>
First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.
Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Try moving the padding to the .four class, I think it will give you your desired result.
You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}
I have my html layout in 2 different divs that I want to align evenly.
Before
After (desired)
How can I achieve it? My html is
.main {
overflow: hidden;
display: block;
}
.column_left {
float: left;
}
#mapcontainer {
margin: 16px 0 0 32px;
position: relative;
padding-bottom: 26px;
}
.box {
display: block;
overflow: hidden;
background: #ffc801;
padding: 10px;
padding-top: 20px;
margin: 8px 0px 8px;
font-family: 'avantgardebook', sans-serif;
font-weight: 300;
}
.box h2 {
font-size: 16px;
margin-bottom: 8px;
margin-top: 0;
}
.box ul {
padding-left: 16px;
margin: 0;
}
.box li {
margin-bottom: 16px;
}
#regions {
float: left;
z-index:5;
display: block;
overflow: hidden;
width: 400px;
font-size: 19px;
margin-left: 4px;
font-weight: 500; /* medium */
}
#regions .regions_one, #regions .regions_two {
font-family: 'avantgardemd', sans-serif;
float: left;
width: 200px;
}
#regions h2 {
display: block;
clear: both;
padding: 12px 0 4px;
margin: 0;
font-size: 14px;
}
#regions ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#regions ul li {
display: block;
clear: both;
overflow: hidden;
margin-bottom: 0;
}
#regions a {
line-height: 20px;
font-size: 15px;
display: block;
float: left;
font-weight: 500; /* medium */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="column_left">
<div class="box">
<ul>
<li>Buy and sell cars, check our <a href="/india/real_estate">real
estate</a>
section, find jobs, and much more.
</li>
<li>Check our <strong>{{count}} ads online</strong> and find what you are looking for
in
your region or in all India.
</li>
</ul>
</div>
<div id="regions">
</div>
<div id="mapcontainer">
<div id='visualization'></div>
<script type="text/javascript">$(document).ready(function () {
$("#regions a").add("area").mouseover(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);
$("#region_" + id).css("text-decoration", "underline");
}
});
$("#regions a").add("area").mouseout(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass();
$("#region_" + id).css("text-decoration", "none");
}
});
});</script>
</div>
If it helps I can make a fiddle with the problem and create a minimal example problem that we can align. It seems like the framework won't let us align it, or do you see where I can change in my fiddle so that the divs are more exactly side by side?
If you don't have to support older browsers have a look at flex. Flexboxes are explained here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
It seems tag div.class="main" and div.class="column_left" haven't closed.