Solved

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

Posted on 2014-11-17
5
390 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 19

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 33

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 33

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 19

Expert Comment

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

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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

688 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