[CSS]wyrównanie 2 elementów do 1 lini

Witam mam taki oto problem:

Mam stworzony element nadrzeny w postaci diva w ktorym znajduja sie 2 pola wykonane w css, pola ta przylegaja do brzegow elementu nadrzednego jeden do prawej drogi do lewej jego strony. Łączna szerokosc tych 2 pol jest 100% szerokości pola nadrzednego chcialbym aby pierwszy element byl na rowni z elementem drogim lub nawet troche ponizej

oto moje CSS odpowiedzalne za to:

Element nadrzedny:

div#tresc {

width:1000px;

display:block;

margin-left: auto;

margin-right: auto;

background-color:#36F;

positon:absolute; top:120px;

display:block;

}

1 element podrzedny:

div#menu {

width:15%;

float:left;

display:block;

background-color:#300;

z-index:-5;

clear:none;

}

2-gi element podrzedny:

div#tabela {


        float:left;

        display:block;

        width:85%;

        float:right;

        margin-left: 10px;

        background-color:#909;

}

Wybacz, ale trochę zamotałem sie. Może mógłbyś narysować to np. w paincie tak na szybko jakiś szkic jak to ma wyglądać albo podać kod HTML? Bo nie wiem czy dobrze rozumuje w tym momencie.

Musisz pokombinować, często jest tak że jak walniesz display czy position to nie działa coś później. Ogólnie taki efekt uzyskuje się przez float: left właśnie. Zrób od nowa style i wstaw tylko wymiary w px oraz float: left w obu! (masz w jednym float left i right więc zacznij od wykasowania tego drugiego)

#tresc{

width: 1000px;

margin: 0px auto;

border: none;

padding: 0px;}


#menu{

width: 150px;

margin: 0px;

border: none;

padding: 0px;

float: left;}


#tabela{

width: 850px;

margin: 0px;

border: none;

padding: 0px;

float: right;}

Jeśli tabela ma być trochę poniżej to linię “margin” zamień na:

margin: 10px 0px 0px 0px;