Sidebar duikt onder content

**Dennis de Wit** · 07-10-2014, 17:58

Beste leden,

Ik ben bezig met mijn allereerste WordPress theme. Nu wil ik de sidebar naast mijn content staan hebben, maar om één of andere reden duikt hij onder de content, zelfs nog buiten de wrapper. Ik snap er niks van, want hij staat netjes binnen de wrapperdiv. Wie kan mij helpen?

Style.css:

Code:

/*Theme Name: FavoriteFMTheme URI: http://FavoriteFM.com
Description: FavoriteFM Late 2014 Theme
Version: 1.0
Author: FavoriteFM
Author URI: http://FavoriteFM.com
*/


/* Theme  */
body {
    background-color: #ececec;
}


a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}


#wrapper {
width:960px; 
margin:0 auto; 
border:1px solid #161616;
}


#header {
width: 960px;
height: 212px;
position: relative;
background-color: #404040;




margin:0 auto;
position: relative;
}


a.top-logo-container {
display: block;
height: 210px;
width: 209px;
text-indent: -9999px;
background: url(img/logo.png) 50% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
left: -370px;
}


#content {
position: relative;
margin-top: 41px
}


.circle{position: relative; top: -150px; left: 850px; width:75px;height:75px; border-color:#00aeff; border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#fff}


/* FrontPage Widgetzone 1 */
.fp_title {
display: block;
background-color: #00aeff;
position: relative;
min-height: 75px;
min-width: 960px;
}


.fp_title_padding {
top: 40px;
position: relative;
font-family: Helvetica;
font-size: 24px;
color: white;
left: 10px;
}


.fp_widgetzone_1_inner {
background-color: #fff;
padding-bottom: 10px;
position: relative;
}


.textwidget {
position: relative;
left: 2px;
min-top: 5px;
}


#Uber_Menu {
position: relative;
margin-top: -76px;
}


/* Frontpage Widgetzone 2 */
#fp_widgetzone_2 {
max-width: 640px;
min-width: 640px;
}




.fp_title_2 {
display: block;
background-color: #00aeff;
position: relative;
min-height: 75px;
}


.fp_title_padding_2 {
top: 40px;
position: relative;
font-family: Helvetica;
font-size: 24px;
color: white;
left: 10px;
}


.fp_widgetzone_2_inner {
background-color: #fff;
padding-bottom: 10px;
position: relative;
padding-top: 2px;
}


/* Sidebar */
#sidebar {
border-left: 1px solid #000;
position: relative;
margin-top: 0px;
max-width: 100px;
float: right;


}




#facebookwidget {
position: relative;
min-width: 320px;
height: 75px;


}


#facebookwidget_title {
position: relative;
min-width: 319px;
left: 0;
top: 0px;
height: 75px;
background-color: #3c5a96;


}


#facebookwidget_title_inner {
position: relative;
top: 40px;


}


#facebook_content {
position: relative;
min-width: 319px;
left: 0;
top: 0px;
height: 75px;
background-color: #fff;
border-bottom: 1px solid #000;
min-height: 300px;
border-right: 1px solid #000;




}


.sidebar_title {
position: relative;
min-width: 319px;
left: 0;
top: 0px;
height: 75px;
background-color: #007cb6;
}


.sidebar_title_padding {
top: 40px;
position: relative;
font-family: Helvetica;
font-size: 24px;
color: white;
left: 10px;
}


.sidebar_widget_inner {
background-color: #fff;
padding-bottom: 10px;
position: relative;
padding-top: 2px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}


/* Article section */
#article {
display: block;
max-width: 700px;
background-color: #fff;
position: relative;
border-right: solid 1px;
border-bottom: solid 1px;
}


#article_top {
position: relative;
left: 0;
top: 0px;
height: 20px;
background-color: #00699a;
border-bottom: 1px solid #000;
min-height: 26px;
max-width: 700;


}


h6.article-meta-extra {
position: relative;
color: #bababa;
padding-left: 9px;
padding-top: 5px;
width: 110px;
border-right: solid 1px #333;
font-size: 12px;
font-style: italic;
font-family: arial;
height: 30px;
}


a.article-meta-back {
position: relative;
color: #fff;
padding-left: 150px;
top: -58px;
width: 110px;
font-size: 12px;
font-family: arial;
height: 30px;
background-image: url('http://test.favoritefm.com/wp-content/themes/FavoriteFM/img/arrow_to_left.png');
background-repeat: no-repeat;
background-position: 130px;
}


.article-meta-views {
position: relative;
padding-top: 5px;
padding-left: 200px;
color: #333;
}


h2.inner-title {
color: #535353;
font-family: Arial;
width: 480px;
padding-left: 40px;
}


h3.comment-reply-title {
position: relative;
margin-left: 20px;
padding-top: 10px;
}




#article_content {
border-left: 1px solid #bababa;
margin-left: 119px;
margin-top: -20px;
position: relative;
padding-bottom: 10px;
}


#photo_post_class {
width: 700px;
position: relative;
padding-top: 10px;
display: block;
background-color: #000;
margin-left: -160px;
height: 460px;
}


.photo_show_pic {
position: relative;
padding-left: 25%;
}


p {
margin-left: 40px;
}


#comment_title_bar {
display: block;
position: relative;
background-color: #bababa;
width: 700px;
height: 30px;
margin-top: -15px;
}


.comment_title_inner {
position: relative;
padding-top: 5px;
padding-left: 10px;
color: #E9E6E6;
font-size: 16px;
margin-top: -35px;
padding-left: 140px;
}


#comment_form {
border-left: 1px solid #bababa;
margin-left: 119px;
margin-top: -20px;
position: relative;
padding-bottom: 10px;
}


.comment_empty_left {
position: relative;
color: #bababa;
padding-left: 9px;
padding-top: 5px;
width: 110px;
border-right: solid 1px #8A8A8A;
font-size: 12px;
font-style: italic;
font-family: arial;
height: 30px;
}


.form-allowed-tags{
display:none;
}


/* Pages */
#page_title {
display: block;
background-color: #00aeff;
position: relative;
min-height: 75px;
min-width: 960px;
}


.page_title_padding {
top: 40px;
position: relative;
font-family: Helvetica;
font-size: 24px;
color: white;
left: 10px;
}


.page_content {
background-color: #fff;
padding-bottom: 10px;
position: relative;
padding-top: 2px;
}


/* UberMenu */
span.wpmega-link-title {
font-size: 14px;
font-family: Arial
font-weight: 100;
}


.wpmega-postlist-title {
font-size: 14px;
font-family: Arial;
}


#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist-w-img div.wpmega-postlist-title, #megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist-w-img div.wpmega-postlist-content {
padding-left: 0px;
color: inherit;
}

Index.php

Code:

<html>	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width">
		<title><?php wp_title( '|', true, 'right' ); ?></title>
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		<!--[if lt IE 9]>
		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
		<![endif]-->
		<?php wp_head(); ?>
	</head>
	<body>
	
	<div id="wrapper">
<?php get_header(); ?>
<div id="content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('fp_widgetzone_1') ) : 
 
endif; ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('fp_widgetzone_2') ) : 
 
endif; ?>


</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>

**Jasper Huting** · 08-10-2014, 11:36

Beste Dennis,

misschien is het eerst handig om de content een breedte mee te geven.

Moet de sidebar rechts of links staan? ik zie namelijk een float right bij de sidebar staan nou raad ik aan om ook de content een float te geven en bij voorkeur een float left en de sidebar ook.

dus:

#content {
position:relative;
margin-top:41px;
float:left;
}

#sidebar{
float:left;
border-left:1px solid #000;
position:relative;
margin-top: 0px;
max-width:100px;
}

wat ook wel handig is, is om na de de sidebar de divs the clearen: <div style="clear:both;"></div>

**Jasper Huting** · 13-10-2014, 11:49

Opgelost dus ;)

Sidebar duikt onder content