I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left and right sides, two divs containing 3 links each. I've experimented with setting widths for each div and floating them left and right while centering the middle one. I've tried looking at similar questions on this platform, but the answers are still confusing to me. For reference, I am using the following IDs for my divs:
topleftnav
topcenter
toprightnav
Here is the code snippet I am working with:
<div id="top">
<div id="topleftnav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</div>
<div id="centerright">
<div id="topcenter">
<layer id="placeholderlayer"></layer><div id="placeholderdiv"><a href="link.htm"><img alt="image2 (9K)" src="images/image2.jpg" border="0"></a></div>
</div>
<div id="toprightnav">
<ul>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
</div>
</div>