I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul id="controlsCar" class="entries nav nav-pills nav-justified">
<li data-target="#custom_carousel" data-slide-to="0">
<a href="#">
<span>
<img src="img1.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="1">
<a href="#">
<span>
<img src="img2.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle1</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="2">
<a href="#">
<span>
<img src="img3.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle3</div>
</span>
</a>
</li>
</ul>
</div>
</div>
it resizes perfectly on Safari and Chrome but I do not see any change in the image with using FireFox or IE.
Does it have to do with the SPAN TAG ? Any ideas?
Thanks
Related
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
What combinator selects each img with a class "box-img" in order to replace each with another?
#about .box-img:nth-child(1){
background-image: url(../img/img-1.jpg);}
But it doesn't work.
Could it be the resolution of the images? The original ones are 250 × 250 and the ones I want to replace with are 600 × 400.
Is there a way to replace each image using only CSS?
You should just use JavaScript to update the src attribute instead. Here a short script that will change all images to another after two seconds.
window.addEventListener("DOMContentLoaded", (e) => {
const imgs = document.querySelectorAll("#about .box-img:nth-child(1)");
const newImage = "https://dummyimage.com/100x100/ff00ff/000000&text=Changed"
// set image to another one after two seconds
setTimeout(() => {
imgs.forEach(img => img.setAttribute("src", newImage))
}, 2000)
});
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
As you can see different image sizes do not hinder you from doing this. You could obviously adjust the logic to do more complicated (yet simple) stuff than replacing all images with the same image but the principle remains the same.
Note: Not duplicate of CSS center display inline block?
This is my fiddle:
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
I tried display:block;margin:auto in outer div.
I tried position:relative;left:50%;transform:translate(-50%)
I tried text-align:center;
But nothing seems to work. Is it even possible?
Thanks in advance guys :)
try , justify-content : center; or align-items: center; it will bring your content center
if you want to bring your text center , use text-align:center in your .scroll class
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
text-align: center;
}
.card {
display:inline-block;
align-items: center;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
You need to add the following code to your CSS.
ol {
padding-left: 0;
}
That will get rid of the space on the left hand side, which belongs to the ol and not any of the li elements.
Jsfiddle
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
ol {
padding-left: 0;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
You set entire body of the html to max-width:400px so you cannot positioning child elements. If you want to align remove max-width property of body class
Remove
body {
max-width:400px;
}
To Change
body {
}
And then set align to child elements
Try this
body {
}
.scroll {
overflow: auto;
white-space: nowrap;
text-align:center;
max-width:400px;
margin:auto;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
Otherwise if you want to keep entire body max-width
Try this
body {
max-width:400px;
margin:auto;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
.cards are chidrens scroll and them have display:inline-block; so better way is use of text-align property.Like this:
.scroll {
text-align:center;
//More Code...
}
Demo
I saw a demo of carousel with thumbnails with bootstrap 3 here.
I am trying to implement the same for bootstrap v4, but could not figure out how to fix some of UI nitty gritty like left/right shadow coming over whole height including thumbnails as well. Here is the fiddle with v4.
Following is HTML code:
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img
src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' />
</li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' />
</li>
</ol>
</div>
CSS Changes:
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-custom {
margin: 20px auto;
width: 400px;
}
#carousel-custom .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-custom .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
opacity: 0.75;
}
For Bootstrap 4 it may be easier to use list-inline for the slider thumbnails and you won't need as much extra CSS.
<div class="col-lg-6 offset-lg-3" id="slider">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
https://codeply.com/go/tBbcVXe1xZ
If you move your controls into the .carousel-inner element, it won't stretch down through the thumbnails:
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide4' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide5' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide6' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide7' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide8' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide9' alt='' />
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
Here's your updated fiddle showing this: JSFiddle
I'm currently working on a little project which involves a table with pictures in. Currently the table is there and I have pagination numbers on the page, but they currently don't do anything.
Here's the code I have for my table:
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
</div>
here's the code I have for the pagination numbers:
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
</div>
When the user clicks on the next page, id like another table to appear but of course separate from the table on the first page. I know I can link the pagination externally, but how do I do it internally so the page doesn't reload when the user clicks the button?
Thanks in advance
I have a seemingly simple alignment issue I can't seem to fix. I have a basic menu inside a div. I want to add content underneath the menu, so I created another div with a top-margin of 10px. For some reason, it is not recognizing the content as separate and keeps inserting the content in line with the menu. The information span class is being placed on the same level as the menu. Please let me know if you see a problem with the way these divisions are set up!
The CSS code just has a padding of 10px on the top for the information class.
HTML CODE:
<body>
<div class="content">
<h1 class="title">HOME PAGE</h1>
<img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
A
</div>
</li>
</ul>
</div>
<div>
<span class="information">
<p>
Some content here
</p>
</span>
</div>
With out seeing your CSS it sounds like a float issue. You need to clear floated elements. Assuming you did them correctly they're most likely on the li tags. You can use overflow:hidden on your parent ul:
ul#sdt_menu{
overflow: hidden;
}
or you can use a cleafix method
ul#sdt_menu:after{
content: '';
display: block;
clear: both;
}
If neither of these work please post your CSS for further help