Div Floats Out of Place [duplicate] - javascript

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 2 years ago.
I am displaying 3 div columns all floating left. As windows gets resized to smaller, I want it to get down to 1 column. So far, it's doing that, but when one div gets longer than the other, it all gets out of whack on a normal laptop screen.
enter image description here
The css is:
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
width: 100%;
}
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
...
Any help would be appreciated to get this floats to align left no matter how long are they... am trying to get them in 3 columns... thanks again!


I would strongly consider using display: flex for this instead, since float is going the way of the dinosaurs.
To fix what you have, you need to make sure the 1,4,7, etc. element can clear longer elements. Added:
.kolumn:nth-child(3n+1) {
clear: left;
}
Removed the media query so you can see it in the snippet window.
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.kolumn:nth-child(3n+1) {
clear: left;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
Here's a flex example:
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.kolumn {
padding: 8px;
flex: 1 0 33.3333%;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
flex: 0 0 100%;
}
}
<div class="wrap">
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
</div>
Here I added a wrap element with display: flex and flex-wrap: wrap to make sure elements wrap:
Then, each .kolumn gets a flex: 1 0 33.3333% property - which is shorthand for flex-grow: 1, flex-shrink: 0, flex-basis: 33.333% - flex-basis is essentially the flex equivalent to width.
Some really good reading on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Related

toggleClass of parent div not changing with onClick

I'm trying to use onClick and toggleClass to change display:none to display:block on the parent elements which contain a child element that contains a certain text.
I.e., I want to show the parent div (or multiple divs) record when it contains the two letter state abbreviation, AK in li.address span.state.
But, it's not working. Fiddle https://jsfiddle.net/ky23ne1w/9/
$(".state-button-ak").on("click", function(e) {
if ($(".record li.address span.state:contains(AK)")) {
$(".record li.address span.state:contains(AK)").parent().toggleClass("display-block");
e.preventDefault();
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-al">Alabama</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Anchorage, <span class="state">AK</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AL</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span>
</li>
</ul>
</div>

It is a really strange approach, why not work with data-attributes or specific classes to target the elements.
The parent in your case is li with address class, not the div with record class.
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.display-block ').removeClass('display-block ');
$('.state-button.active').removeClass('active');
_this.addClass('active');
let state = _this.text().substring(0,2).toUpperCase();
if(state === 'AL')
state = 'AK';
$('span.state:contains('+state+')').closest('.record').addClass('display-block');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-ar">Arkansas</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
This is an example using data-attributes:
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.state-button.active, .record.active').removeClass('active');
$('[data-state='+_this.data('state')+']').addClass('active');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.record.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<div class="record" data-state="AK">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record" data-state="AR">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record" data-state="CA">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>

How to make it so that when you click on one of the menu items, the other changes color?

How to make one of the li circles in .sidebar-nav change the background color to white when you click on one of the li in the .sidebar-menu, by adding the .actived class to it? Moreover, when one of the li in the .sidebar-menu is clicked, the circle from the .sidebar-nav should change color in accordance with the element that was clicked. For example, they clicked on the "Business card site" and the first circle lights up, clicked on the "Internet store" and the third circle lights up.
Site ct03638.tmweb.ru
Code jsfiddle.net/pjzs9uxw/
.actived {
background-color: #fff;
transition: 0.3s;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>

You can use index() of the li which is clicked then using that addClass to same li in your sidebar-nav ul.
Demo Code :
$('.sidebar-menu li a').on('click', function(e) {
e.preventDefault()
var index_ = $(this).closest("li").index() //get index
$('.sidebar-nav li').removeClass('actived');//remove from other
$(".sidebar-nav li:eq(" + index_ + ")").addClass('actived'); //add class where index is same
});
.actived {
background-color: red;
transition: 0.3s;
}
.sidebar-nav li {
width: 7px;
height: 7px;
border: 1px solid black;
border-radius: 50px;
margin-right: 5px;
cursor: pointer;
}
.sidebar-nav {
list-style: none;
display: flex;
justify-content: flex-start;
margin-left: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>

Add click event listener on sidebar-menu ul element and capture the index of clicked li element, then get the circle element of same index and add active class on it and remove the active class from previous highlighted element.
const menuEle = document.querySelector("#side-menu");
let higlightedIndex = -1;
menuEle.addEventListener("click", (e) => {
const listItem = e.target.closest("li");
if (listItem) {
const index = [...menuEle.children].indexOf(listItem);
const list = document.querySelector("#sidebar-nav").children;
if (higlightedIndex >= 0) {
list[higlightedIndex].classList.remove("active");
}
list[index].classList.add("active");
higlightedIndex = index;
}
});
.active {
background-color: #FAE93E;
}
.circle {
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
display: inline-block;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu" id="side-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<div id="sidebar-nav">
<span class="business-card circle"></span>
<span class="landing circle"></span>
<span class="market circle"></span>
<span class="corp circle"></span>
<span class="bitrix circle"></span>
<span class="advertising circle"></span>
<span class="seo circle"></span>
<span class="promotion circle"></span>
<span class="marketing circle"></span>
</div>
</div>
</div>
</div>
</section>

On the click function of your button, try adding a line that sets a class or an attribute to the parent menu element related to this current item. This way you can apply different styles according to the current menu item to the whole menu.

How to fix: Navbar styling issue

The following is the code for the navbar on https://www.vimaldevelopers.com/vimalproject0/residential-projects-mumbai/vimalprojects.html
Checked the bootstrap version on the bad navbar page and it is 3.3.7
<div class="col-lg-9 col-md-5 col-sm-6 col-xs-12 toll-col-mob">
<div style="background: #85B540!important; width: 95rem; height: 2rem; ">
<div class="hotlines text-white">Contact No.
0222-8981111
<!-- 1 800 212 8888 -->
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li>
<li class="drop-drown-menu clearfix">
projects
<ul class="dropdown-content menu-show">
<li>
Residential
</li>
<li>
Commercial
</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
I want to make it look like the main page on https://www.vimaldevelopers.com. This page is using v4.
This is what the above code looks like (the bad navbar) :
This is how I want it to look like :
Someone please save my day!

try this :::
.toll-col-mob {
width:100%;
}
.toplinks ul {
display: flex;
justify-content: center;
color: #fff;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}

U don't need navbar in column structure. Try with this code. Hope can help you.
<body style="padding: 0; margin: 0;">
<div class="toll-col-mob">
<div style="background: #85B540!important; height: 2rem; " >
<div class="hotlines text-white">Contact No.
0222-8981111
<!-- 1 800 212 8888 -->
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li> /
<li class="drop-drown-menu clearfix">
projects</span>
<ul class="dropdown-content menu-show">
<li>
<a href="#" class="" >Residential</a>
</li>
<li>
<a href="#" class="" >Commercial</a>
</li>
</ul>
</li> /
<li>Contact Us</li>
</ul>
</nav>
</body>

I think in your second div "width" will be 100%
<div style="background: #85B540!important; width: 100%; height: auto;" >
and please explain little bit more if it doesn't work.

Try this:
body{
padding:0;
margin:0;
}
<div class="">
<div style="background: #85B540!important; width: 100vw; height: 2rem" >
<div class="hotlines text-white ">Call:
0222-8981111
</div>
</div>
<div style="background: #18191b!important; padding-top: 15px">
<nav class="toplinks">
<ul>
<li>Vimal Developers</li> /
<li class="drop-drown-menu clearfix">
projects</span>
<ul class="dropdown-content menu-show">
<li>
<a href="#" class="" >Residential</a>
</li>
<li>
<a href="#" class="" >Commercial</a>
</li>
</ul>
</li> /
<li>Contact Us</li>
</ul>
</nav>
</div>

How to align list in <section> tag?

I am fairly new to web development and there is still some issues I can resolve by myself.
I have this code:
HTML:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
</div>
and this CSS
ul , li {
list-style-type: none;
}
#column{
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
}
#colunmA{
}
#colunmB{
}
#colunmC{
}
I left rules #colunmA , #colunmB and #colunmC in CSS empty because I don't know what to put in here.
I would like to align all elements that belong to each column together. Also, elements in column C do not align horizontally and vertically with the others columns. I would like to achieve a similar result:
JS Fiddle here: https://jsfiddle.net/gdiop/s9w2ku8q/24/

You are placing your elements in little bit wrong way.
No need to make seperate rules for Column A,B,C. Always try to make general rules which can by applied to n-number of things.
Here is yout updated JSfiddle Demo
I added float and margin property to #column.
CODE:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
<li class="en">list A6</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list b1</li>
<li class="en">list b2</li>
<li class="en">list b3</li>
<li class="en">list c5</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list c1</li>
<li class="en">list c2</li>
<li class="en">list c3</li>
</ul>
</section>
</div>
</div>
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
float:left;
margin-left:10px;
}
#colunmA {}
#colunmB {}
#colunmC {}

This is based on comments provided by me. note that the css is very simple and same class is applied to all columns A, B, C. i use class instead of id for simpler code:
ul , li {
list-style-type: none;
padding-left: 2px;
}
.columns {
display: block;
text-align: center;
margin: 0 auto;
}
.colunmItem { /* same class for columnA,B,C */
display: inline-block;
text-align: left;
vertical-align: top;
line-height: 300%; /* control line spacing for list items */
margin:0 5%;
}
<div class="columns">
<div class="colunmItem">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB" class="colunmItem">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunmC" class="colunmItem">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>
</div>

First remove from #column selector the align-items: center;
then u can add to each of your columns selector margin:0 20px;
for make a space between columns.
ul{
padding:0;
}
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
line-height: 200%;
}
#colunmA {
margin: 0 20px;
}
#colunmB {
margin: 0 20px;
}
#colunmC {
margin: 0 20px;
}
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunm C">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>

Jquery UI nested Sortables with more than one UL

I am trying to implement jquery UI nested sortables with more than one UL. Below is the code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight"
});
$("span.item-controls").click(function(){
//alert($(this).parent().next('div').attr('class'))
var v = $(this).parent().next('div.panel');
v.slideToggle("slow");
});
});
</script>
<style>
ul {
min-height:10px;
}
li {
margin:5px;
width:auto;
border:1px solid #000;
list-style-type:none;
cursor:move;
}
#example5 {
display: inline-block;
float: left;
position: relative;
width:900px;
}
.fright
{
float:right;
}
.item-controls {
cursor: pointer;
font-size: 12px;
position: relative;
right: 20px;
top: 5px;
background: url("images/arrows.png") no-repeat scroll transparent;
xborder: 1px solid #000;
background-position:3px 0px;
width:20px;
height:15px;
}.ui-sortable{
margin:0px;padding:0px;
}
.ahead
{
margin:0px;
}
div.panel
{
height:auto;
display:none;
}
div.panel
{
margin:0px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div id="example5"><!--UL1-->
<ul style="width:32%;float:left;" class="navigation">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL2-->
<ul style="width:32%;float:left;" class="navigation2">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
<!--UL3-->
<ul style="width:32%;float:left;" class="navigation3">
<li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1</p>
</div>
<ul>
<li >
<p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 1 1</p>
</div>
<ul></ul></li>
<li >Item 1 2<ul></ul></li>
<li >Item 1 3<ul></ul></li>
</ul>
</li>
<li >
<p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
<div class="panel">
<p>This is Item 2</p>
</div>
<ul><li >Item 2 1<ul></ul></li></ul>
</li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
</body>
</html>
So far so good,got the expected result. Now my requirement is, From UL-1 should not be sortable with UL-2 and UL-3 also from UL-2,UL-3 should not be sortable together.Hope you understand the requirement. Is it possible to do that. Kindly advice on this.

Try use this way
$("#example5 ul").sortable({
connectWith: "#example5 ul.navigation *",
placeholder: "ui-state-highlight"
});
So your target will be always your main UL and remains are just for sortable elements.
Note:
I added different class names to your html part to use this solution.

you have to set the "container", for example:
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight",
containment: "#selector"
});
For more information, check this.

Categories

Resources