klaudi klaudi - 4 months ago 14
HTML Question

How to align an img and a carousel next to each other, with max-width of 1000px?

I am a beginner and I've ran into an obstacle while trying to align the img (

#logo
) and the carousel (
#my-slider
) - both located in
#img-header
.

Under them there is a navigation bar and under that some text. The site is supposed to hava a max-width of 1000px (the width of the img is 350px and the width of carousel is 630px, so supposably they're both under 1000px), however when trying to align them, carousel jumps under the logo. If I try to align just the carousel with the navbar and text,
float:left
works (if I change the max-width to 1060) however,
float:right
does not work at all - it moves to the right, no matter how i change the max-width. All 3, navbar, text and img-header are supposed to be equally wide. The img and carousel "agree" to be in the same line only if I set the max-width to 1880, which also makes the stick to the left and not being centered. I also tried setting the
max-width
to 1000 and float the logo to left and carousel to right but it also doesn't work - neither does it work if I float both to the same side (for example, both
float:left;
.

This is how the website is supposed to look like- with this in the center.

Demo of the website

HTML:

<div id="img-header">
<img id="logo" src="logo/logo3.png" style="width:350px;height:240px">
<div class="container">
<div class"row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">

<!-- indicators, small dots -->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>

<!-- wrapper for slides -->
<div class="carousel-inner" role="listenbox">
<div class="item active">
<img src="food/food1.jpg" alt="food 1">
</div>
<div class="item">
<img src="food/food2.jpg" alt="food 2">
</div>
<div class="item">
<img src="food/food3.jpg" alt="food 3">
</div>
</div>

<!--navigations/ next and prev buttons -->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!--<span class="sr-only">Previous</span>-->
</a>

<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<!--<span class="sr-only">Previous</span>-->
</a>
</div>
</div>
</div>
</div>
</div>


CSS:

#img-header {
max-width: 1060px ;
margin-left: auto ;
margin-right: auto ;
}


#logo {
float: left;
}
#my-slider {
float: left;
}
#navbar {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: #125ea3;
}
li {
float: right ;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #3594ff;
}
.active {
background-color: #3594ff;
}
.text {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
h1 {
text-align="center"
}
p {
text-align="center"
}


I know I am just a begginer so I have probably made quite a few mistakes, please forgive me in advance.

Thanks for all the help and advice in advance!

Answer

Documentation of bootstrap has everything. You just need to look for it. http://getbootstrap.com/css"

And I think your problem can be solved by

<div class="row">
  <div class="col-md-4">
     <!--Logo Comes here-->
  </div>
  <div class="col-md-8">
     <!--Carousal Comes here-->
  </div>
</div>