• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Stuck with a CSS issue :(


#1
Im creating a blog in WP for when I go travelling so I can show my images and experience to friends and family back home.

How do I get the below widgets to sit side by side instead of one long row as they are:



I've tried what I think is everything and its not working.

This is the code for my sidebar that I have:
(It's probably all wrong now as I have been messing and changing things round)


/
* Begin Sidebar */
#sidebar {
float:left;
width:854px;
font-fanily:Georgia, Times New Roman, Serif;
color:#625E51;
font-size:12px;
line-height:18px;
padding:23px;
background-color:#edeae1;
border:0px;
}

#sidebar ul {
display:inline;
}

#sidebar ul ul {
margin-left:0px;
}

#sidebar ul ul ul {
margin:0;
padding:0;
}

#sidebar ul li {
list-style-type:none;
margin:0 30px 20px 0;
}

#sidebar li li {
margin:0;
padding:0px;
}

#sidebar a {
display:block;
font-size:1em;
color:#464339;
padding:0;
text-decoration:none;
}

#sidebar a:hover {
display:block;
font-size:1em;
color:#ffffff;
background-color: #464339;
padding:0;
text-decoration:none;
}

#sidebar h4 {
font-size:1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
color:#464339;
line-height:20px;
margin:0 0 5px 0;
border-bottom: 1px dotted #464339;
display:block
}
/* End Sidebar */
Thanks guys :confused:
 

glenwheeler

Senior Member
#3
Hi Hippy,

Do you have an example of the site live anywhere?

It would require a few changes, all you need to do is set a width on the ul and set them to display inline.

It should'nt be too difficult to do. Depending how many of them you want side by side. If you can provide a live version I can give you the style back.

Thanks,
Glen
 

tbwcf

Active Member
#4
Like Mikey said you need to give them a width. I imagine they're all in divs by default they will have display:block which means they'll expand to the full width of their parent unless stated otherwise.

Sounds like you probably don't use firebug otherwise you would have inspected the html and realised that.. you should really get on it!

In your themes functions.php file where the widgets are referenced it will have :

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar',
'before_widget' => '<div class="sidebar-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Something similar to above - you can change the before and after widgets/titles here if you need to.