CODEWITHSUNDEEP
htmlcsslayoutstylesheet
HP.
HP.

Reputation: 19896

Center buttons in second column with flexible width?

How do I center the red and yellow blue buttons within #top-menu?

http://jsfiddle.net/qhoc/qKXD2/

My problem is I want #top-menu to stay on the right side and not overlapping the whole screen width. Right now anything within #top-menu is center to the screen itself.

Thanks.

Upvotes: 0

Views: 322

Answers (4)

sureshunivers
sureshunivers

Reputation: 1753

Check the demo for the center logo and top-menu on header.

Upvotes: 0

Afshin
Afshin

Reputation: 4215

change #top-menu .center and #logo styles like these I think this is what you want

#logo {
  background-color: yellow;
  display: block;
  float: left;
  width: 180px;
  height: 45px;
  position:absolute;
 }


#top-menu .center {
  width: 235px;
  margin auto;
}

DEMO

Upvotes: 2

Sowmya
Sowmya

Reputation: 26989

remove float:left from the button styles and add display:inline-block. Add overflow:auto to #top-menu .center

Explanation

Float:left: makes your div to align exact left to the parent div.

disply:block: Makes the div to occupy the entire horizontal space.

Overflow:auto: Makes parent div to extend based on the content inside ot.

Since you need to place the two divs next to each other give inline-block. inline-block makes div to be expanded based on the content inside the div.

LIVE DEMO

Upvotes: 1

Vinay
Vinay

Reputation: 53

this is the solution. remove float left in logo and put margin:0 auto; see the below link

http://jsfiddle.net/qKXD2/6/

Many Thanks

Upvotes: 0

Related Questions