logo
down
shadow

Positioning two elements on opposite ends of a 100% with header


Positioning two elements on opposite ends of a 100% with header

By : user2955633
Date : November 22 2020, 10:40 AM
help you fix your problem You'd have to set a min-width of 600px in addition to using the width:100% on the container div. Otherwise the only remaining options are for them to overlap (using position: absolute) or drop below each other (floats alone). Depending on the browser, it'll either stop at your min-width, or at least the right/left links will stay put.
You could also use CSS media queries for showing/hiding elements at various widths if you want.
code :
.outer {
  width: 100%;
  min-width: 600px;
  height: 100px;
  background-color: #555;
}

.leftLinks {
  width: 400px;
  position: absolute;
  float: left;
  background-color: #999;
}

.rightLinks {
  width: 200px;
  position: relative;
  float:right;
  background-color: #999;
}

li {
  float: left;
  display: inline-block;
  margin-left: 5px;
}
<div class="outer">

<div class="leftLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ol>
</div>

<div class="rightLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
  </ol>
</div>

</div>


Share : facebook icon twitter icon
Alignt two elements to opposite sides of a DIV without absolute positioning

Alignt two elements to opposite sides of a DIV without absolute positioning


By : HiraiRei
Date : March 29 2020, 07:55 AM
wish help you to fix your issue One way is to float them. But remember to clear the floats.
The best way for positioning header elements?

The best way for positioning header elements?


By : mr.art
Date : March 29 2020, 07:55 AM
To fix the issue you can do It isn't acting like fixed, it's acting like absolute. fixed deals with the window scrolling, not with it resizing. Your css is as follows:
code :
#tr_corner {
    position:absolute;
    top:10px;    
    right:20px;    
}
CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?


By : Solaivel.S
Date : March 29 2020, 07:55 AM
like below fixes the issue I am styling a header of a webpage. I want the header to be a single line which includes a logo and some navigational links. I feel the best, most modern way to layout this header today is with CSS3's flexbox, so that is what I would like to use. , From your question:
code :
<li id="spacer"></li>
#spacer {
    visibility: hidden;
    flex-grow: 1;    
}
ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { font-size: 2rem; }
#main span { font-size: 1rem; }

#spacer {
    visibility: hidden;
    flex-grow: 1;    
}
<ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>

  <!-- Spacer element -->
  <li id="spacer"></li>
    
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>
Header elements not positioning right in css

Header elements not positioning right in css


By : Sam
Date : March 29 2020, 07:55 AM
may help you . To position elements on the right you need to add this to your CSS code for class navbar-nav:
code :
.navbar-nav
{
  position:relative;      // positioning relative to parent
  float:right;            // float right inside it's parent
  list-style-type:none;   // this is to remove the list dots (bullets)
  background:#2A2A36;
}
body{
    background: #ecf0f1;
    font-family: 'Open Sans', sans-serif;
}
header{
    background-color: #2A2A36;

}
.bold{
    font-weight: bold;
}
.loginInput input{
    margin: 0 auto;
    width: 150px
}

.dropdown-menu{
    width: 200px;
    height: 220px;
    background:#1F2021;
    opacity: 0.9;
}
.navbar-nav .nav-link{
    color: #ecf0f1;
    text-align: right;
}
.navbar-nav .nav-link:hover{
    background:#d35400; 
}
form{
    margin: 0 auto;
}
.searchForm form{
    height: 0px;
    display: block;
}

*{
    padding: 0;
    margin: 0;
}
.navbar-nav .nav-item{
    border-right: 1px solid #FFF;
}

.navbar-nav
{
  position:relative;
  float:right;
  list-style-type:none;
  background:#2A2A36;
}
<div class="row">
        <div class="col">
    <!--Navigation bar-->
            <header class="container-fluid">

                <nav class="nav navbar-expand-sm">
                        <!--Search form-->
                    <div class="searchForm">
                        <form class="form-inline" action="">
                            <input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
                        </form>
                    </div>
                    <!--Navigation bar links-->
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link bold">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link bold">Register</a>
                        </li>
                        <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle bold" id="navbardrop" data-toggle="dropdown">Login</a>
                                <!--Login dropdown form-->
                            <div class="dropdown-menu dropdown-menu-right">
                                <h3 class="dropdown-header">Log In</h3>
                                <form action="">
                                    <div class="form-group loginInput">
                                        <input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
                                    </div>

                                    <div class="form-group loginInput">
                                        <input type="password" name="password" class="form-control" id="password" placeholder="Password">
                                    </div>
                                    <!--Login Buttton-->
                                    <button type="submit class=btn btn-primary">Log In</button>
                                </form>
                            </div>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
    </div>
CSS Positioning elements in a header

CSS Positioning elements in a header


By : user2075981
Date : March 29 2020, 07:55 AM
help you fix your problem Multiple ways to solve it using CSS. Simplest way is to use vertical-align: top in your button class. I would however recommend you look into display: flex. It's much easier for vertical alignment.
Working JSFiddle here: http://jsfiddle.net/Lhefbudx/
Related Posts Related Posts :
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org