Solved

keep my div the same size as my nav menu and aligned under it using bootstrap

Posted on 2014-11-17
5
345 Views
Last Modified: 2014-11-18
I'm new to Bootstrap and am having difficulty aligning my div under my nav menu and keeping it there during a resize. is there any specific bootstrap classes I can do to achieve this?

The page in question can be found here. The white box with the intro text needs to be the same width as the navigation menu above it, as well as be aligned underneath it whenever the browser is being resized.

Thanks in Advance!
0
Comment
Question by:Big Monty
  • 3
  • 2
5 Comments
 
LVL 18

Accepted Solution

by:
Greg Alexander earned 500 total points
ID: 40450063
You could wrap the text and logo in a div with class of container (seems like you commented it out at one point) Then you would have to remove the CSS rules that give it the position absolute and the margin right of 18%.

<div class="container">

            <div class="row">
                <div class="col-lg-3 pull-left xtLogo">                   
                    <img src="img/logo.png" height="200" width="200" />
                </div>

                <div class="col-lg-9">
			            <div class="mainText pull-right">
					            <h1 class="text-center">Welcome to ExchangeTree.Org!</h1>
					            <p>
						            ExchangeTree facilitates the pursuit of passions, interests, and needs through exchange in your community. Barter goods, services, things 
						            you can teach, and things you can lend or share, with other trusted users.
					            </p>
				            <br />
			            </div>
                </div>
            </div>

        </div>

Open in new window


Then remove position: absolute and margin-right: 18% from the .mainText class.

Hope that helps!
0
 
LVL 32

Author Comment

by:Big Monty
ID: 40450138
thanks for the suggestion!

I tried what you said, got rid of the position and margin-right css rules, but it just pushed the box all the way to the left, and when I resized the browser, it didn't stay roughly under the nav nar. if I keep the margin-right at 18%, it aligns properly under the nav bar, but again, it doesn't resize accordingly when the browser is resized.

The container class, is that just a generic container? is it suppose to be responsive automatically (resize automatically), or does it have more attributes? I'm having a hard time finding documentation for the core classes in Boostrap that describes their attributes
0
 
LVL 32

Author Closing Comment

by:Big Monty
ID: 40450157
ignore my last response, it does work :) I had forgotten to hit save on my index.htm file, caffeine hasn't hit me yet :)

thanks again for the help, much appreciated! I may have a few more questions coming up if you're interested
0
 
LVL 18

Expert Comment

by:Greg Alexander
ID: 40450161
Great! I will keep an eye out for them.
0
 
LVL 32

Author Comment

by:Big Monty
ID: 40450852
posted another (simple I hope!) question if you're interested in having a look:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28564957.html
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now