webpage div layout issue - html

Question

I have 2 divs, one 30%, one 70%, with float:left to position them side by side in the webpage. the first div contains some text, a select control and a button. that displays properly. The second 70% width div is a slideshow container. I use javascript to display the slides, which are contained within varying sized divs. The slides have a 50px margin-left and display properly. I have another div within the slideshow container div that contains navigation elements for navigating through the slideshow. I want to position this div below the current slide, offset by 50px left and centre within the slide width.
here's a diagram...

Answer 1

Something like this?
https://jsfiddle.net/tmqqn9aj/
Kind of hard to tell what you want without seeing your code.
Add a slide container around your slide and then use:
position: absolute;
left: 50px;
To add the 50px left 'margin'
And add position: relative to the 70% width div
Add your nav inside the slide container, leave the width at auto and center align your nav
Ok, just seen your code.. the problem is you are absolutely positioning .mySlides and so the nav is being pushed to the top of the document as absolute positioning removes any relativity.
Instead, absolutely position your .slideshow-container and add left: 50px to it, remove margin-left: 50px and position: absolute; from .mySlides

Answer 2

#container{
margin:0 auto;
width:100%;
}
#leftpart{
width:30%;
height:200px;/*remove this*/
background-color:blue;/*remove this*/
float:left;
}
#contentpart{
width:70%;
height:500px;/*remove this*/
background-color:red;/*remove this*/
float:left;
}
#fixeddiv{
width:30px;
height:100px;/*remove this*/
position:absolute;
top:10px;
left:calc(30% + 5px);
background-color:cyan;/*remove this*/
padding:0px;
}
.sidediv{
margin-top:5px;
width:100%;
height:30px;/*remove this*/
background-color:violet;/*remove this*/
}
<div id='container'>
<div id='leftpart'></div>
<div id='contentpart'>
<div id='fixeddiv'>
<div class='sidediv'></div>
<div class='sidediv'></div>
</div>
</div>
</div>