Using CSS to emulate tabbed windows - html

Question

I currently have two divs that I'm trying to use to emulate a drop down tabbed window.
I have content where the grayed out areas are. The bigger div (the div containing the big gray area or the "window") has a position of absolute, but so does the little div (the tab). I can't figure out how to move the tab so that I can add more tabs. When I do add more tabs, they just sit over the middle tab. I've looked at all the styling in the Elements dev tools, but there aren't other properties that can "shift" the tab left or right. How can I move it over to the left by, say, 200 px?

Answer 1

It is hard to help you without knowing more about your situation and seeing the code. But I made a couple illustrations to try and help you.
Example one.
This is how I would do it without position absolute. This way will keep the content area up top but will stack the tabs from left to right as you add more,
html
<div id="content">
</div>
<div id="tab1" class="tab">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
</div>
css
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
Output
This way is using position absolute and here is a jsfiddle.
Once an element has position absolute it can be moved around with directional rules. It starts in the top left corner. To move it now you can add a direction with an amount.
#myElement: {
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 10px;
}
You can play with these values and watch the element move around the window.
Same html as example 1.
CSS
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
#tab1 {
position: absolute;
left: 8px;
}
#tab2 {
position: absolute;
left: 300px;
}
#tab3 {
position: absolute;
left: 631px;
}
If this does not help you please add your code so I can better understand what you are trying to accomplish. From your question it sounds like you are having trouble using position asbsolute and creating tabs side by side of eachoter under the content. If so I have provided two examples.
1. using position absolute.
2. using display: inline-block.