Re: Aligning items in CSS

[CMonique]

Hey Paulie,

They have widths, this is the section of the code I’m trying to sort out. When I gave the widget a px width it messed up the other sidebars further down the page.

#slider {
position:relative;
}

#slider
.sidebar-top,
.widget {
float:right;
max-width:88%;
width:auto;
text-align:center;
}

#slider {
border:15px solid #000000;
width:550px;
height:300px;
margin:10px;
box-shadow:0 7px 10px 0 #444444;
}

#slider a:active {
outline:none;
}

.slides,
.flex-control-nav {
margin:0;
padding:0;
list-style:none;
}

.slides {
width:550px;
height:300px;
overflow:hidden;
}

#slider .slides > li {
display:none;
position:relative;
margin:0;
}

#slider .slides li:first-child {
display:list-item;
}

.flex-pauseplay span {
text-transform:capitalize;
}

.slides:after {
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}

.flex-control-nav {
position:relative;
right:0;
bottom:8%;
width:50%;
list-style: none;
text-align:center;
}

.flex-control-nav li {
display:inline-block;
margin:0 0 0 15px;
}

.flex-control-nav li:first-child {
margin:0;
}

.flex-control-nav li a {
display:block;
width:10px;
height:10px;
cursor:pointer;
background:rgba(255, 255, 255, .4);
border-radius:24px;
color:#333;
font-weight:600;
line-height:24px;
text-indent:-48px;
overflow:hidden;
}

.flex-control-nav li a.flex-active,
.flex-control-nav li a:hover {
background:rgba(255, 255, 255, .8);
}

.flex-direction-nav,
.flex-pauseplay {
position:absolute;
left:60px;
bottom:8%;
width:100px;
margin: 0;
list-style: none;
font-size: 18px;
font-weight: 600;
z-index: 2;
}

.flex-pauseplay {
left:15px;
width: 26px;
font-size: 15px;
}

.flex-pause {
font-family: sans-serif;
}

.flex-direction-nav li,
.flex-pauseplay a {
float: left;
margin: 0 5px;
background: rgba(0, 0, 0, .15);
border-radius: 4px;
}

.flex-direction-nav a,
.flex-pauseplay a {
display: inline-block;
width: 18px;
padding: 4px 8px;
color: #fff;
opacity: .8;
text-align: center;
cursor: pointer;
}

.flex-direction-nav a:hover,
.flex-pauseplay a {
opacity: 1;
}

#slider .hentry {
margin:0;
box-shadow:none;
background:none;
border:none;
color:#fff;
text-align:right;
}

#slider .wp-post-image,
#slider .entry-attachment {
position:relative;
top:0;
left:0;
width:100%;
}

#slider .entry-attachment {
z-index: 1;
}

#slider ul li:first-child .entry-container {
display: block;
}

#slider .entry-title {
display: none;
position:absolute;
top:32%;
right:0;
z-index:1;
float:right;
float:right;
margin:0;
font-family: “Open Sans”, sans-serif;
font-size:25px;
line-height:1.62em;
}

#slider .entry-title a {
display:block;
padding:10px 20px;
background:rgba(0, 0, 0, .15);
color:#fff;
}

#slider .entry-summary {
clear: both;
float:right;
max-width: 61.8%;
min-width: 324px;
padding:10px 20px;
background:rgba(0, 0, 0, .15);
}

#slider .entry-summary .entry-attachment {
position:static;
max-width:100%;
height:auto;
padding:0;
background:none;
}

#slider .entry-attachment,
#slider .entry-attachment p {
margin-bottom:0;
}