100% DIV Container ganz am Rand?! HTML CSS

Ich möchte einen Div Container auf 100% breite setzten, aber dabei bleibt immer links und rechts ein kleiner Rand..

Jetzt habe ich per margin Tag, den Container zwar ganz links an den Rand bekommen, aber rechts ist immer noch eine Lücke, das Problem ist, dass der der margin-right Tag nicht funktioniert...

Ich hab auch schon probiert die breite nicht auf 100% sondern 102 oder sowas zu setzten, dann ist die Lücke zwar kleiner, aber ganz geht sie auch nicht weg, weil z.B. 103% schon wieder viel zu breit ist.. und beim Zoomen der Seite wird die Lücke immer sehr stark sichtbar..

Ich will also einfach 100% Breite, ohne Lücken am Rand

Hat jemand eine Idee?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Goldzora

17.03.2015, 08:37

Die div-Container sind schon 100% breit, allerdings besitzt der body, je nach Browser, auch einen gewissen margin und padding. Wenn du folgenden Code in dein Stylesheet einfügst, sollte der Rand weg sein, dann stellst du auch sicher, dass deine Website in allen Browsern identisch angezeigt wird:

body{margin:0;padding:0;}

Elroy7000

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

16.03.2015, 21:13

Ein Div Container nimmt immer 100% der verfügbaren Breite ein, die muss man nicht extra setzen.

Benutze einen CSS Reset dann sollten auch die Ränder weg sein.

Ähnliche Beiträge

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zum Beitrag

CSS float left und right?

Ich habe drei Div-Container welche nebeneinander sein sollen. wie mache ich das? gibt ja float right und float left aber kein float center oder so ähnlich.

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

Webdesign: Diagonale Linien oder DIV-Container mit diagonalen Kanten mit CSS?

Hallo Leute!

Was wäre eigentlich die eleganteste Lösung per CSS diagonal verlaufende Linien zu zeichnen oder Container mit diagonal verlaufenden Kanten zu erstellen?

Oder müsste ich mir das alles mit extra-DIV-Containern, margins und degrees so zusammenbasteln, bis es passt?

Danke schon mal.

...zum Beitrag

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zum Beitrag

Boostrap: Bild über ganze Breite des Browserfensters strecken?

Es ist vielleicht eine dumme Frage, aber ich kriege es nicht hin (kenne mich nicht aus mit Bootstrap):
Man soll ja laut Bootstrap-Anleitung seine Elemente in ein div stecken, das entweder die Klasse "container" oder "container-flui" hat. Ich wollte die Klasse "container" benutzen, weil ich nicht will, dass meine Texte über die ganze Breite gehen, habe aber gleichzeitig ein paar Bilder, die über die gesamte Breite des Browserfenster gehen sollen, was mit "container" aber nicht zu funktionieren scheint. Mit container-fluid schon, aber dann gehen auch die Texte über die ganze Breite. Und den Texten einfach eine max-width und margin: 0 auto zu geben scheint auch nicht zu funktionieren. Noch eine Info: ich habe den Texten und Bildern col-md-12 gegeben.

Kann mir jemand sagen, wie man das macht? (Mit Bootstrap Bilder über die ganze Breite strecken, aber Texte nicht?)

Vielen Dank im Voraus

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zum Beitrag

wozu braucht man div? (HTML)

Hallo,

beschäftige mich momentan bisschen mit html. Mir bereiten diese Positions und div container Probleme.

Also meine frage lautet wofür braucht man denn Div container?

man kann eine Webseite doch auch einfach ohne Div container aufbauen. also man setzt für jedes Element die Position absolute und gibt dann mit top und left die genaue Position ein, wo sich ein Element befinden soll.

Hoffe ihr versteht mich.

Danke im voraus

...zum Beitrag

Html css Zentrieren?

Moin, ich habe in html 4 Bilder. Darunter will ich jeweils einen Block mit Text

Wie man sieht ist ganz rechts der Block direkt unter dem Bild, das habe ich mit margin gemacht. Bei den anderen Blöcken klappt dies nur nicht mehr. Die Bilder und Blöcke sind in keinem Container oder keiner div soweit ich weiß

Danke

...zum Beitrag

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen