Yes this is okay to use in this way.
@extech
oh that’s cool thank you .. by the way there are other tags inside the #main… do i have to list them down in the css?
#main .wrapper
.othertag #div2
.othertag2 .othertag3{
width: 100%;
}
or just the chosen ones? i am trying its responsiveness
thank you
You can list them down as many as you want but in my opinion you are making it complicated.
You can simply target the divs by using classes.
It will not effect your responsiveness. Because can re-write the css in the media screen.
The #main is actually a default so if I changed it lots of element in css will be affected and the other tags are plugins or wordpress defaults.
I guess ill just test them out…
Thank you sir
More common usage would be:
<div id="main" class="wrapper">
[...]
</div>
The important thing is that an ID is unique, there is only one of them in the page.
It’s best to give big sections an id so you can organize the css better:
<div id="header" class="wrapper">
<div class="3col">[...]</div>
<div class="3col">[...]</div>
<div class="3col">[...]</div>
</div>
<div id="main" class="wrapper">
<div class="3col">[...]</div>
<div class="3col">[...]</div>
<div class="3col">[...]</div>
</div>
<div id="footer" class="wrapper">
<div class="3col">[...]</div>
<div class="3col">[...]</div>
<div class="3col">[...]</div>
</div>
so then you can set a rule for all .3col, and give individual rules by id
.wrapper {max-width:1000px}
.3col {width: 32%}
#header .3col {height:300px}
#main .3col {height: 400px}
#footer .3col {height: 100px}
@extech, @rossmitchell thank you sirs
@wpmonty, sir the divs are nested.. but ill keep this idea